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. 【解决方案】M2Crypto不支持python3

    问题现象:python3的环境下,导入M2Crypto模块报错 "ModuleNotFoundError: No module named 'M2Crypto",通过pip ins ...

  2. visual Studio 无法调试，提示程序跟踪已退出

    今天在打码出现了vs无法调试,我在网上查了很久没有发现一个方法. vs点击启动时,出现了一下提示 程序"[12648] *.vshost.exe: 程序跟踪"已退出,返回值为 0 ...

  3. Rolling Hash(Rabin-Karp算法)匹配字符串

    您可以在我的个人博客中访问此篇文章: http://acbingo.cn/2015/08/09/Rolling%20Hash(Rabin-Karp%E7%AE%97%E6%B3%95)%E5%8C%B ...

  4. 浅谈 var 关键字

    提起 var关键子,程序员的第一反应就是JavaScript, 事实上这个关键子在其他语言中也有被采用. 比如说C#, 比如说kotlin, 用法和JavaScript中使用差不多,作为要声明变量的前 ...

  5. Mapper 动态代理方式

    Mapper接口开发方法只需要程序员编写Mapper接口(相当于Dao接口),由Mybatis框架根据接口定义创建接口的动态代理对象,代理对象的方法体同上边Dao接口实现类方法. Mapper接口开发 ...

  6. [POJ 1410] Intersection（线段与矩形交）

    题目链接:http://poj.org/problem?id=1410 Intersection Time Limit: 1000MS   Memory Limit: 10000K Total Sub ...

  7. web消息推送-goesay

    原文:http://www.upwqy.com/details/22.html 1 GoEasy简介: GoEasy - Web实时消息推送服务专家 最简单的方式将消息从服务器端推送至客户端 最简单的 ...

  8. 通过网络路径获取的图片 btye 图片流互转

    楼主有一个需要用户用的网站要上传图片,图片不保存到网站,而是要专门存放到一个图片服务器上面,于是需要通过byte的形式来传输 之前写的一个本地图片流转于byte互转 后来发现通过网络路径获取的图片这个 ...

  9. Phalanx

    Phalanx Time Limit:5000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Stat ...

  10. Building Block

    Building Block Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tota ...