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

css3 ， ie8以上

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.         <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.         <title>横向滑动overflow-x: scroll</title>
  8.         <style>
  9.         *{
  10.                 margin: 0;
  11.                 padding: 0;
  12.         }
  13.                 li{
  14.                         list-style: none;
  15.                 }
  16.                 .box1{
  17.                         width: 100px;
  18.                         height: 60px;
  19.                         overflow: hidden;/* 超出隐藏滚动条 */
  20.                         background-color: skyblue;
  21.                 }
  22.                 .box1 .wrap{
  23.                         width: 100px;/* 和父盒子宽度一样 */
  24.                         height: 76px;/* 比里层元素高16px 为了隐藏滚动条*/
  25.                         overflow-x: scroll;/* 定义超出此盒子滚动 */
  26.                         overflow-y: hidden;
  27.                 }
  28.                 .box1 .wrap ul{
  29.                         width: 300px;
  30.                         display: flex;
  31.                 }
  32.                 .box1 .wrap ul li{
  33.                         flex: 1;
  34.                         width: 60px;
  35.                         height: 60px;
  36.                         box-sizing: border-box;
  37.                 }
  38.         </style>
  39.     </head>
  40.     <body>
  41.         <div class="box1">
  42.                 <div class="wrap">
  43.                         <ul>
  44.                                 <li>1移动端</li>
  45.                                 <li>2可滑动</li>
  46.                                 <li>3ie8以上</li>
  47.                                 <li>4</li>
  48.                                 <li>5</li>
  49.                         </ul>
  50.                 </div>
  51.         </div>
  52.     </body>
  53. </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. VS连接数据库的通用方法（SQL/MySql）

    在vs里面连接数据库的方法有很多,这里是通用的方法和基本操作 SQL /// <summary> /// 数据访问抽象基础类 /// Copyright (C) Maticsoft /// ...

  2. 利用Dropbox同步Arch下一些软件的配置文件

    一些软件后要好好的配置一番才能好好为自己所用,比如vim,比如conky等等,但是万一系统真出了问题,或者硬盘跪了,要重新安装系统重新配置的时候真是一种折磨,前阵子想到如果用dropbox同步那些配置 ...

  3. python第四课——线程、进程、协程

    面试or笔试题:简述线程.进程.协程之间的关系? 内容概要 1.进程与线程优.缺点的比较 2.适用情况 3.线程 线程的创建 setDaemon join event RLock 队列 4.进程 创建 ...

  4. （转）Java中使用正则表达式的一个简单例子及常用正则分享

    转自:http://www.jb51.net/article/67724.htm 这篇文章主要介绍了Java中使用正则表达式的一个简单例子及常用正则分享,本文用一个验证Email的例子讲解JAVA中如 ...

  5. PHP备忘录

    file_exists()在判断文件是否存在的时候是递归判断每个目录是不是有执行权限. Echo输出大字符串速度慢:打开apache配置项‘deflate’进行压缩输出.

  6. Linux系统查找

    1. which:在当前用户环境变量path指定的路径下查找可执行程序/文件. 特点:(1)只在当前用户环境变量指定的路径下查找: (2)只找出可执行程序/文件的位置: (3)查找速度非常快. 注:使 ...

  7. [译]ASP.NET Core 2.0 本地文件操作

    问题 如何在ASP.NET Core 2.0中受限地访问本地目录和文件信息? 答案 新建一个空项目,修改Startup类,添加访问本地文件所需的服务: public void ConfigureSer ...

  8. LINUX环境下SVN安装与配置（利用钩子同步开发环境与测试环境）

    安装采用YUM一键安装: 1.环境Centos 6.6 2.安装svnyum -y install subversion 3.配置 建立版本库目录mkdir /www/svndata svnserve ...

  9. C++ 空间配置器(allocator)

    C++ 空间配置器(allocator) 在STL中,Memory Allocator 处于最底层的位置,为一切的 Container 提供存储服务,是一切其他组件的基石.对于一般使用 STL 的用户 ...

  10. Windows环境下多线程编程原理与应用读书笔记（7）————事件及其应用

    <一>事件 事件主要用于线程间传递消息,通过事件来控制一个线程是处于执行状态还是处于挂起状态. 事件和互斥量之间的差别: 事件主要用于协调两个或者多个线程之间的动作,使其协调一致,符合逻辑 ...