<!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. mysql插入数据自动生成主键uuid

    DemoMapper.java //注意方法的返回值必须是void; void add(Demo demo); ============================================ ...

  2. ORACLE数据库误删恢复

    一.表的恢复 对误删的表,只要没有使用PURGE永久删除选项,那么从flash back区恢复回来希望是挺大的.一般步骤有: 1.从flash back里查询被删除的表 select * from r ...

  3. arcgis python 布局中所有元素信息报告

    # Author: ESRI # Date: July 5, 2010 # Version: ArcGIS 10.0 # Purpose: This script generates a report ...

  4. React拾遗(上)

    JSX代表Objects Babel转义器会把JSX转换成一个名为React.createElement()的方法调用. 下面两种代码的作用是完全相同的: const element = ( < ...

  5. body-parser 解析post数据

    安装 $ npm install body-parser API var bodyPaeser =require('body-parser') bodyParse.raw(option) 将请求体内容 ...

  6. insmod内核模块时提示"unknown symbol ..."如何处理?

    答: 是当前内核模块所依赖的模块没有被加载导致的,加载对应的依赖模块即可

  7. ubuntu更强大的包管理工具:aptitude

        aptitude 与 apt-get 一样,是 Debian 及其衍生系统ubuntu上 一个强大的包管理工具.与 apt-get 不同的是,aptitude 在处理依赖问题上更佳一些.apt ...

  8. OGG-01332 ogg高版本向低版本传输

    Neo君遇到的ogg版本问题,在ggserr.log中的错误信息如下: 2018-10-12 09:55:10 ERROR OGG-01332 Oracle GoldenGate Delivery, ...

  9. Android仿微信底部选项卡

    第一步 添加依赖 dependencies { compile 'com.yinglan.alphatabs:library:1.0.5' } 第二步 布局使用 <?xml version=&q ...

  10. 22Flutter中的常见的按钮组件 以及自定义按钮组件

    /* Flutter中的常见的按钮组件 以及自定义按钮组件 一.Flutter中的按钮组件介绍 Flutter里有很多的Button组件,常见的按钮组件有:RaisedButton/FlatButto ...