html代码展示（直接复制代码保存至本地文件运行即可）：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>移动端隐藏滚动条解决方案</title>

    <style type="text/css">

    * {

        padding: 0;

        margin: 0;

    }

    .container {

        height: 50px;

        -webkit-box-sizing: border-box;

        box-sizing: border-box;

        overflow: hidden;

    }

    .nav {

        height: 100%;

        overflow-x: scroll;

        overflow-y: hidden;

        background-color: #999;

    }

    .con {

        width: 640px;

        height: 100%;

        display: flex;

        align-items: center;

    }

    .con>li {

        text-align: center;

        font-size: 16px;

        width: 80px;

        list-style: none;

    }

    .container ::-webkit-scrollbar {

        display: none;

    }

    </style>

</head>

<body>

    <div class="container">

        <nav class="nav">

            <ul class="con">

                <li>元素一</li>

                <li>元素二</li>

                <li>元素三</li>

                <li>元素四</li>

                <li>元素五</li>

                <li>元素六</li>

                <li>元素七</li>

                <li>元素八</li>

            </ul>

        </nav>

    </div>

</body>

</html>

设置滚动条隐藏： .container ::-webkit-scrollbar {display: none;}
此时效果已经实现，既可滑动对应元素的内容，也隐藏了滚动条。但是，ios上的滑动效果很不流畅，不利于用户体验，Android上是ok的；此时可以加上这样一句css代码（-webkit-overflow-scrolling: touch;），如下：

.nav {

        height: 100%;

        overflow-x: scroll;

        overflow-y: hidden;

        background-color: #999;

        /*解决ios上滑动不流畅*/

        -webkit-overflow-scrolling: touch;

    }

这时ios上滑动变得流畅了，但是又出现了一个新的问题，滚动条又重现了，如图：



现在的需求是：既要不出现滚动条，又要滑动流畅，可以使用接下来一个小技巧：
因为滚动条是出现nav这个标签元素上的，所以可以进行如下设置：**

.nav {

        /*width: 100%;*/

        height: 100%;

        overflow-x: scroll;

        overflow-y: hidden;

        background-color: #999;

        /*解决ios上滑动不流畅*/

        -webkit-overflow-scrolling: touch;

        /*纵向超出部分将会隐藏，即滚动条部分被挤出可视区域*/

        padding-bottom: 20px;

    }

正确代码
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>移动端隐藏滚动条解决方案</title>

    <style type="text/css">

    * {

        padding: 0;

        margin: 0;

    }

    .container {

        height: 50px;

        -webkit-box-sizing: border-box;

        box-sizing: border-box;

        overflow: hidden;

    }

    .nav {

        height: 100%;

        overflow-x: scroll;

        overflow-y: hidden;

        background-color: #999;

        /*解决ios上滑动不流畅*/

        -webkit-overflow-scrolling: touch;

        padding-bottom: 20px;

    }

    .con {

        width: 640px;

        height: 100%;

        display: flex;

        align-items: center;

    }

    .con>li {

        text-align: center;

        font-size: 16px;

        width: 80px;

        color: #fff;

        list-style: none;

    }

    .container ::-webkit-scrollbar {

        display: none;

    }

    </style>

</head>

<body>

    <div class="container">

        <nav class="nav">

            <ul class="con">

                <li>元素一</li>

                <li>元素二</li>

                <li>元素三</li>

                <li>元素四</li>

                <li>元素五</li>

                <li>元素六</li>

                <li>元素七</li>

                <li>元素八</li>

            </ul>

        </nav>

    </div>

</body>

</html>

PS：

1.nav的外层容器设置了固定高度，并且设置了内容溢出隐藏，所有nav的纵向的超出内容是不可见的，即：overflow:hidden;
2.padding-bottom等于20px并非固定值，只要你的设置的值大小足够将滚动条挤出可视区域即可。

纯css隐藏移动端滚动条解决方案（ios上流畅滑动）---转载的更多相关文章

  1. 纯css隐藏移动端滚动条解决方案（ios上流畅滑动）

    纯css隐藏移动端滚动条解决方案(ios上流畅滑动) html代码展示(直接复制代码保存至本地文件运行即可): <!DOCTYPE html> <html lang="en ...

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

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

  3. 纯css实现移动端横向滑动列表&&overflow:atuo;隐藏滚动条

    <!DOCTYPE html> <html> <head> <title>横向滑动</title> <style type=" ...

  4. css实现移动端滚动条隐藏仍然可以滚动内容

    .g-panel { height: calc(100% - 112px); overflow: auto; &::-webkit-scrollbar { display: none; // ...

  5. 移动端项目在ios上输入框聚焦难解决方案

    由于引入fastclick导致ios端input.textarea输入框难以点击聚焦,解决方案如下: 找到项目中的fastclick依赖或在main.js中改写fastclick的focus实现.

  6. CSS隐藏overflow默认滚动条同时保留滚动效果

    主要应用于移动端场景,仿移动端滚动效果.对于隐藏滚动条,众所周知overflow:hidden,但是想要的滚动效果也没了. 所以对于移动端webkit内核提供一个伪类选择器: .element::-w ...

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

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

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

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

  9. 纯CSS垂直居中的四种解决方案

    总结了几种解决方法 但也不是说除了我说的就没有其他方法了 第一个.利用flex布局 代码: 效果: 第二个.利用transform 的 translate属性 代码: 效果: 第三个.使用伪类::af ...

随机推荐

  1. C语言接口

    struct i_foo * foobar_foo(void); //返回接口指针struct foo_object * foo_create(struct i_foo *iface, void *d ...

  2. linux性能分析工具Cpu

  3. django 常用 import

    from django.shortcuts import HttpResponse, render, redirect def yimi(request): #直接返回页面内容 return Http ...

  4. python实战-有道翻译

    #导入urllib包里的request请求模块import urllib.request#导入urllib包里的解析模块 import urllib.parse import json content ...

  5. 分享学做的一个jsp注册页面

    分享一个自己学习时,用bootstrap,多方搜索做的注册页面,包括页面的非空验证.导入相关的bootstrap的js和css文件就可以了.背景很丑,可以自己换一个.后面进一步完善<(￣︶￣)↗ ...

  6. Kettle5.4.0 java.lang.OutOfMemoryError

    CPU: Intel i3 3.40GHz Memory : 8G Kettle默认配置 将MySQL上的一张29W条数据的表,通过Kettle增量抽取到Vertica数据库中,结果在排序这一步报内存 ...

  7. springmvc中拦截器配置格式

    对于springmvc,有两种方式配置拦截器. 一是实现HandlerInterceptor接口,如 public class MyInterceptor1 implements HandlerInt ...

  8. Debian取消从光盘安装软件的方式（please insert the disc labeled）

    与Ubuntu不同,使用apt-get install packages时Debian可能会提示: Media change: please insert the disc labeled 'Debi ...

  9. boost datetime

    To create a date, use the class boost::gregorian::date 1. date #include <boost/date_time/gregoria ...

  10. boost Shared Memory

    Shared Memory Shared memory is typically the fastest form of interprocess communicatioin. It provide ...