overflow-x: scroll;横向滑动（移动端使用详解）

css3 ， ie8以上

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

        <title>横向滑动overflow-x: scroll</title>

        <style>

        *{

                margin: 0;

                padding: 0;

        }

                li{

                        list-style: none;

                }

                .box1{

                        width: 100px;

                        height: 60px;

                        overflow: hidden;/* 超出隐藏滚动条 */

                        background-color: skyblue;

                }

                .box1 .wrap{

                        width: 100px;/* 和父盒子宽度一样 */

                        height: 76px;/* 比里层元素高16px 为了隐藏滚动条*/

                        overflow-x: scroll;/* 定义超出此盒子滚动 */

                        overflow-y: hidden;

                }

                .box1 .wrap ul{

                        width: 300px;

                        display: flex;

                }

                .box1 .wrap ul li{

                        flex: 1;

                        width: 60px;

                        height: 60px;

                        box-sizing: border-box;

                }

        </style>

    </head>

    <body>

        <div class="box1">

                <div class="wrap">

                        <ul>

                                <li>1移动端</li>

                                <li>2可滑动</li>

                                <li>3ie8以上</li>

                                <li>4</li>

                                <li>5</li>

                        </ul>

                </div>

        </div>

    </body>

</html>

overflow-x: scroll;横向滑动详细讲解的更多相关文章

  1. 纯css实现移动端横向滑动列表&&overflow:atuo;隐藏滚动条

    <!DOCTYPE html> <html> <head> <title>横向滑动</title> <style type=" ...

  2. ios7中使用scrollview来横向滑动图片，自动产生偏移竖向的偏移 问题

    ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题     如图红色为scrollview的背景色,在scrollview上加了图片之后,总会有向下的偏移 设置conten ...

  3. node+vue进阶【课程学习系统项目实战详细讲解】打通前后端全栈开发(1)：创建项目，完成登录功能

    第一章 建议学习时间8小时·分两次学习      总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章]) 视频教程地 ...

  4. 实现移动端touch事件的横向滑动列表效果

    要实现手机端横向滑动效果并不难,了解实现的原理及业务逻辑就很容易实现.原理:touchstart(手指按下瞬间获取相对于页面的位置)——>touchmove(手指移动多少,元素相应移动多少). ...

  5. Siki_Unity_2-1_API常用方法和类详细讲解(下)

    Unity 2-1 API常用方法和类详细讲解(下) 任务101&102:射线检测 射线origin + direction:射线检测:射线是否碰撞到物体 (物体需要有碰撞器),碰撞物体的信息 ...

  6. 纯css实现移动端横向滑动列表

    前几天在公司做开发的时候碰到一个列表横向滑动的功能,当时用了iscroll做,结果导致手指触到列表的范围内竖向滑动屏幕滑动不了的问题. 这个问题不知道iscroll本身能不能解决,当时选择了换一种方式 ...

  7. 纯css实现移动端横向滑动列表(可应用于ionic3移动app开发)

    前几天在公司做开发的时候碰到一个列表横向滑动的功能,当时用了iscroll做,结果导致手指触到列表的范围内竖向滑动屏幕滑动不了的问题. 这个问题不知道iscroll本身能不能解决,当时选择了换一种方式 ...

  8. 微信小程序 scroll-view 左右横向滑动没有效果（无法滑动）问题

    小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动之分,在这次项目中刚好需要用到横向滑动,但在测试过程中发现横向滑动没有了效果(静止在那里没移动过),经调试发现: 1.scroll ...

  9. C++语言堆栈的详细讲解

    本文主要向大家介绍了C++语言堆栈的详细讲解,通过具体的内容向大家展示,希望对大家学习C++语言有所帮助. 一.预备知识—程序的内存分配 一个由c/C++编译的程序占用的内存分为以下几个部分 1.栈区 ...

随机推荐

  1. python爬虫之爬取百度图片

    ##author:wuhao##爬取指定页码的图片,如果需要爬取某一类的所有图片,整体框架不变,但需要另作分析#import urllib.requestimport urllib.parseimpo ...

  2. JS 巧用 && 与 ||

    在对于流程控制语句当中,我们最熟悉不过的就是 if (条件){ //代码块 }else{ //代码块 } 对于一个执行不同的代码来说,如果执行的代码很多,可能就有必要使用上面这种方式 但往往我们开发当 ...

  3. python之集合

    集合(set),它是一个无序的,不重复的数据组合,它是作用如下: 1.去重,也就是去除重复的内容.有一点值得注意的是:将一个列表(list)变成集合的时候,会自动去重. 2.关系测试.测试数据之间的交 ...

  4. win10 uwp 保存用户选择文件夹

    如果我们每次把临时处理的文件保存,都要让用户选择一次,用户会不会觉得uwp垃圾?如果我们每次打开应用,都从某个文件读取,而这个文件不在应用目录和已知的目录,那么每次都需要用户选择,用户会不会觉得uwp ...

  5. ListView如何优化

    1.ListView 如何提高其效率? 当 convertView 为空时,用 setTag()方法为每个 View 绑定一个存放控件的ViewHolder 对象. 当 convertView 不为空 ...

  6. java选择结构

    /**选择结构*/ public class Demo06{ public static void main(String []args){ // if...else...型 String name ...

  7. Android SDK国内更新

    恩,废话就不多说了,俩网址,mirrors.neusoft.edu.cn和ubuntu.buct.edu.cn,在这里感谢wecloud和北京化工大学,十分感谢提供方便之门

  8. （转）Java 网络IO编程总结（BIO、NIO、AIO均含完整实例代码）

    原文出自:http://blog.csdn.net/anxpp/article/details/51512200 1.BIO编程 1.1.传统的BIO编程 网络编程的基本模型是C/S模型,即两个进程间 ...

  9. Java基础总结--常用类以及包的访问权限

    -----Object---所有类的根类1.怎么得到的:通过对所有对象不断的向上抽取共性,具备所有对象的共性的东西2.常用的方法* equals(Object obj):比较两个对象的引用是否指向同一 ...

  10. 使用prettytable美化python的print输出

    经常碰到需要将一些数据用表格形式输出来.自己手动写太麻烦. 用prettytable能很好解决这个问题. ...(未完)