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. MYSQL数据库45道练习题

    --第一题查询Student表中的所有记录的Sname.Ssex和Class列.select Sname,Ssex,Class from Student;--第二题查询教师所有的单位即不重复的Depa ...

  2. 双11电商剁手节，最全的H5互动营销案例合集

    距离双11不足一个月! 是否准备好为双十一疯狂剁手! 自从天猫2009年首创双11购物节以来双十一不仅成为了消费者的"剁手日" 更是每年企业营销的"狂欢节" 各 ...

  3. 创建UWP通用应用程序

    一,下载VS2015,下载地址:https://www.visualstudio.com/zh-hans/downloads/ VS2015下载地址 二,选择UWP开发工具并安装 VS2015配置 三 ...

  4. mybatis mysql 批量插入

    场景描述: 使用mybatis操作mysql数据库,进行批量插入数据,提高代码质量和执行效率. 环境: mybatis spring mysql java xml配置文件 <insert id ...

  5. Android 自定义View实现QQ运动积分抽奖转盘

    因为偶尔关注QQ运动, 看到QQ运动的积分抽奖界面比较有意思,所以就尝试用自定义View实现了下,原本想通过开发者选项查看下界面的一些信息,后来发现积分抽奖界面是在WebView中展示的,应该是在H5 ...

  6. github 项目绑定自己的域名

    上周脑子发热申请了自己的一个域名.本想搞一个自己的网站,后来囊中羞涩,数据库,服务器..买不起了,只买个域名,发现啥也搞不成.后来突然想到了不行找个东西映射到这个域名上吧,就想到了github,之前也 ...

  7. LeetCode 342. Power of Four （4的次方）

    Given an integer (signed 32 bits), write a function to check whether it is a power of 4. Example:Giv ...

  8. spacemacs及python学习-坑之记录

    Table of Contents 1. spacemacs 1.1. .spacemacs 文件 1.2. 项目文件 1.3. open shell windows 1.4. emacs基础 1.4 ...

  9. 机器学习之三：logistic回归(最优化)

    一般来说,回归不用在分类问题上,因为回归是连续型模型,而且受噪声影响比较大.如果非要应用进入,可以使用logistic回归. logistic回归本质上是线性回归,只是在特征到结果的映射中加入了一层函 ...

  10. 关于mysql的临时表并行的问题

    mysql的临时表并行是没问题的 以为临时表是基于会话的 1.因为在mysql里面每个会话的sessionid 不一样 2.其实就是会话级别的临时表  DB2里面有会话级别 全局级别的临时表,Orac ...