<!DOCTYPE html>

<html>

<head>

    <title>横向滑动</title>

    <style type="text/css">

        .slide-box{

            margin-top: 200px;

            display: -webkit-box;

            overflow-x: scroll;

            -webkit-overflow-scrolling:touch;

        }

        .slide-item{

            width: 200px;

            height: 200px;

            border:1px solid #ccc;

            margin-right: 30px;

        }

    </style>

</head>

<body>

    <div class="slide-box">

        <div class="slide-item"></div>

        <div class="slide-item"></div>

        <div class="slide-item"></div>

        <div class="slide-item"></div>

        <div class="slide-item"></div>

    </div>

</body>

</html>

==============================================

overflow:atuo;隐藏滚动条

动端页面为了更接近原生的体验，是否可以隐藏滚动条，同时又保证页面可以滚动？

使用 overflow:hidden 隐藏滚动条，但存在的问题是：页面或元素失去了滚动的特性。 
由于只需要兼容移动浏览器（Chrome 和 Safari），于是想到了自定义滚动条的伪对象选择器

::-webkit-scrollbar。
  • 1

应用如下 CSS 可以隐藏滚动条：

.element::-webkit-scrollbar {display:none}
  • 1

如果要兼容 PC 其他浏览器（IE、Firefox 等），国外一位才人 John Kurlak 也研究出了一种办法。在容器外面再嵌套一层 overflow:hidden 内部内容再限制尺寸和外部嵌套层一样，就变相隐藏了。

  1.  
    <div class="outer-container">
  2.  
    <div class="inner-container">
  3.  
    <div class="content">
  4.  
    ......
  5.  
    </div>
  6.  
    </div>
  7.  
    </div>
  8.  
    .outer-container,.content {
  9.  
    width: 200px; height: 200px;
  10.  
    }
  11.  
    .outer-container {
  12.  
    position: relative;
  13.  
    overflow: hidden;
  14.  
    }
  15.  
    .inner-container {
  16.  
    position: absolute; left: 0;
  17.  
    overflow-x: hidden;
  18.  
    overflow-y: scroll;
  19.  
    }
  20.  
     
  21.  
    /* for Chrome */
  22.  
    .inner-container::-webkit-scrollbar {
  23.  
    display: none;
  24.  
    }

纯css实现移动端横向滑动列表&&overflow:atuo;隐藏滚动条的更多相关文章

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

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

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

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

  3. CSS实现移动端横向滑动

    html: <div class="chosen-container"> <div class="chosen-swiper"> < ...

  4. 用css巧妙实现移动端横向滑动展示功能

    前言:记得以前处理移动端横向滑动展示都是去用js去解决的,要用js进行蛮多处理,要算li的宽度,然后还要用js设置ul盒子的宽度,又要设置最大滑动距离,最小滑动距离等等.......但是现在发现用cs ...

  5. 【css】用css巧妙实现移动端横向滑动展示功能

    前言:记得以前处理移动端横向滑动展示都是去用js去解决的,要用js进行蛮多处理,要算li的宽度,然后还要用js设置ul盒子的宽度,又要设置最大滑动距离,最小滑动距离等等.......但是现在发现用cs ...

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

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

  7. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  8. 纯CSS实现移动端常见布局——高度和宽度挂钩的秘密

    纯CSS实现移动端常见布局--高度和宽度挂钩的秘密 不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊-可是在项目上线之后,才让我崩溃了,原因非常easy, ...

  9. 解决移动端ios下overflow-x scroll无法隐藏滚动条的问题

    这次有个需求是在web首页添加分类菜单,一共是8个分类,在移动端水平展示,可以左右滚动. 最后在手机上微信浏览器看到是有个滚动条,非常影响美观. 主要通过以下代码实现水平滚动 white-space: ...

随机推荐

  1. BZOJ4237稻草人——单调栈+CDQ分治

    题目描述 JOI村有一片荒地,上面竖着N个稻草人,村民们每年多次在稻草人们的周围举行祭典. 有一次,JOI村的村长听到了稻草人们的启示,计划在荒地中开垦一片田地.和启示中的一样,田地需要满足以下条件: ...

  2. FLUENT导入CHEMKIN机理的单位问题【转载】

    转载自:http://blog.sina.com.cn/s/blog_4a0a8b5d0101pj3c.html CHEMKIN机理导入后,发现速率常数全变了,那么他们是怎样变化的呢? FLUENT中 ...

  3. C语言结构体笔记

    typedef给结构起别名 可以是匿名结构或者普通的结构,方便后面使用. #include<stdio.h> typedef struct{ //匿名结构 float tank_capac ...

  4. 火狐调试工具-DevTools

    狐调试工具 - DevTools 咱们做写js 代码的时候,遇到的一个最大的问题就是调试问题,很多开发者在写 js 代码的时候,经常都非常痛苦.但是我们如果掌握好相应的调试工具,那么就可以比较游刃有余 ...

  5. 2.linux的增删改查

    一.增删改查       1.建立文件和目录         mkdir /tmp/xueying       2.cd 进入的路径         绝对路径:以根目录为其实目录的路径         ...

  6. 安装navicat后C盘多了好多链接文件夹

      安装完最新的navicat后C盘多了好多连接文件夹 多了一堆链接的文件夹,里面就是 这些文件,但是吧强迫症怎么能让C盘那么多没有用的文件夹存在呢 最起码是这样的吧: 怎么办呢?找navicat的设 ...

  7. 猎豹网校C++ Primer学习笔记2

    14.数组 数组定义时的长度必须是在编译时就能确定的值. 全局数组会自动初始化为0. size_t 15.指针 其指向类型要相同. 指针和引用: 指针可以先不初始化,可以修改指向.有指针的指针. 16 ...

  8. js求数组最大值方法

    定义数组 var arr = [-1, 1, 101, -52, 10, 1001, 1001] 1.es6拓展运算符... Math.max(...arr) 2.es5 apply(与方法1原理相同 ...

  9. jmeter 查看结果树，获取响应体写法校验是否提取写法是否正确的方法

    JSON Path Expression里面写入提出值的写法,点击Test测试提取

  10. （四）HttpServletRequest对象(转）

    转自“孤傲苍狼”博客. Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象. request和response对象即 ...