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. Golang开发者常见的坑

    Golang开发者常见的坑 目录 [−] 初级 开大括号不能放在单独的一行 未使用的变量 未使用的Imports 简式的变量声明仅可以在函数内部使用 使用简式声明重复声明变量 偶然的变量隐藏Accid ...

  2. Spark 基本概念

    Application:用户编写的 Spark 应用程序,包含驱动程序(Driver),和分布在集群中多个节点上运行的 Executor 代码,在执行过程中由一个或多个作业组成 Driver(驱动程序 ...

  3. C#设计模式之十组合模式（Composite）【结构型】

    一.引言   今天我们要讲[结构型]设计模式的第四个模式,该模式是[组合模式],英文名称是:Composite Pattern.当我们谈到这个模式的时候,有一个物件和这个模式很像,也符合这个模式要表达 ...

  4. Ardupilot设备驱动 IIC、SPI、USART

    设备代码层次结构 ​ Ardupilot设备驱动代码的层次结构采用 前端实现 和 后端实现 分割,前端库主要供机器代码层调用,后端库主要供前端调用.这里前端可以理解为应用层,后端理解为驱动层,前端调用 ...

  5. LeetCode 226. Invert Binary Tree （反转二叉树）

    Invert a binary tree. 4 / \ 2 7 / \ / \ 1 3 6 9 to 4 / \ 7 2 / \ / \ 9 6 3 1 Trivia:This problem was ...

  6. Dagger2 入门解析

    前言 在为dropwizard选择DI框架的时候考虑了很久.Guice比较成熟,Dagger2主要用于Android.虽然都是google维护的,但Dagger2远比guice更新的频率高.再一个是, ...

  7. Fastify 系列教程四 （求对象、响应对象和插件）

    Fastify 系列教程: Fastify 系列教程一 (路由和日志) Fastify 系列教程二 (中间件.钩子函数和装饰器) Fastify 系列教程三 (验证.序列化和生命周期) Fastify ...

  8. 快速部署Telegraf & Influxdb

    是什么? Telegraf 是一个用 Go 编写的代理程序,可收集系统和服务的统计数据,并写入到 InfluxDB 数据库.Telegraf 具有内存占用小的特点,通过插件系统开发人员可轻松添加支持其 ...

  9. 微信小程序之bindtap事件绑定传参

    wxml代码: <view class='fen'> <text bindtap='prev' data-page="{{pageDang}}">上一页&l ...

  10. struts2（五）之struts2拦截器与自定义拦截器

    前言 前面介绍了struts2的输入验证,如果让我自己选的话,肯定是选择xml配置校验的方法,因为,能使用struts2中的一些校验规则,就无需自己编写了, 不过到后面应该都有其他更方便的校验方法,而 ...