隐藏滚动条的同时还需要支持滚动，我们经常在前端开发中遇到这种情况，最容易想到的是加一个iscroll插件，但其 实现在CSS也可以实现这个功能，我已经在很多地方使用了，下面一起看看这三种方法。

方法1：计算滚动条宽度并隐藏起来

在本站的侧栏，你可以看到前端日报的那块内容并没有滚动条，但鼠标移上去却可以滚动内容。这是什么技术呢？ 其实我只是把滚动条通过定位把它隐藏了起来。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" type="text/css" href="http://caibaojian.com/demo/reset.css">

    <title>Document</title>

    <style type="text/css">

    a {

        color: #333;

        text-decoration: none;

    }

    .daily-box {

        margin-left: -5px;

        height: 452px;

        overflow: hidden;

        position: relative;

        width: 360px;

        border: 1px solid #e6e6e6;

        border-radius: 4px;

        padding: 15px;

    }

    .daily-box ul {

        position: absolute;

        left: 0;

        padding-left: 5px;

        top: 0;

        bottom: 0;

        right: -17px;

        overflow: scroll;

        overflow-x: hidden;

    }

    .daily-box li {

        margin-bottom: 10px;

        line-height: 28px;

    }

    </style>

</head>

<body>

    <div class="daily-box">

        <ul>

            <li class="active"> <a rel="bookmark" href="http://caibaojian.com/fe-daily-20180316.html" title="20180316 前端开发日报"> <span class="daily-title">20180316 前端开发日报</span><h3 class="daily-desc">canvas实现的前端压缩裁剪工具；Typescript : 类 vs 接口；我的前端成长回顾；简单理解JavaScript异步与回调；Ja...</h3> </a></li>

            <li> <a rel="bookmark" href="http://caibaojian.com/fe-daily-20180315.html" title="20180315 前端开发日报"> <span class="daily-title">20180315 前端开发日报</span><h3 class="daily-desc">Vue 2.0学习笔记：不同场景下组件间的数据通讯；Vue 组件的通信；ajax常见面试题；JS拾荒の字符串；React入门—r...</h3> </a></li>

            <li> <a rel="bookmark" href="http://caibaojian.com/fe-daily-20180314.html" title="20180314 前端开发日报"> <span class="daily-title">20180314 前端开发日报</span><h3 class="daily-desc">JS函数知识点梳理；从零开始搭建一个vue项目；vue 服务端渲染折腾记录；网友搭了个《生活大爆炸》面部识别库，可以用 face-recog...</h3> </a></li>

            <li> <a rel="bookmark" href="http://caibaojian.com/fe-daily-20180313.html" title="20180313 前端开发日报"> <span class="daily-title">20180313 前端开发日报</span><h3 class="daily-desc">2018年腾讯前端一面总结（面向2019届学生）；天下无难试之 HTTP 协议面试刁难大全；10 个技巧，让你更专业地使用 console ...</h3> </a></li>

            <li> <a rel="bookmark" href="http://caibaojian.com/fe-daily-20180312.html" title="20180312 前端开发日报"> <span class="daily-title">20180312 前端开发日报</span><h3 class="daily-desc">《你不知道的 JavaScript 上卷》 学习笔记；webpack详解；Phaser 3.2.0 Kaori 发布，优秀的 HTML5 游...</h3> </a></li>

            <li> <a rel="bookmark" href="http://caibaojian.com/fe-daily-20180311.html" title="20180311 前端开发日报"> <span class="daily-title">20180311 前端开发日报</span><h3 class="daily-desc">我对知乎前端相关问题的十问十答 – 张鑫旭；CSS3进阶：酷炫的3D旋转透视；vue常见面试题；使用 vue-virtual-c...</h3> </a></li>

        </ul>

    </div>

    <script src="//caibaojian.com/demo/base.js"></script>

</body>

</html>

下面给一个简化版的代码

<div class="outer-container">

    <div class="inner-container">

        ......

    </div>

</div>

.outer-container{

    width: 360px;

    height: 200px;

    position: relative;

    overflow: hidden;

}

.inner-container{

    position: absolute;

    left: 0;

    top: 0;

    right: -17px;

    bottom: 0;

    overflow-x: hidden;

    overflow-y: scroll;

}
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style type="text/css">

    .outer-container {

        width: 360px;

        height: 200px;

        position: relative;

        overflow: hidden;

    }

    .inner-container {

        position: absolute;

        left: 0;

        top: 0;

        right: -17px;

        bottom: 0;

        overflow-x: hidden;

        overflow-y: scroll;

    }

    </style>

</head>

<body>

    <div class="outer-container">

        <div class="inner-container">

            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        </div>

    </div>

    <script src="//caibaojian.com/demo/base.js"></script>

</body>

</html>

这个代码巧妙的向右移动了17个像素，刚好等于滚动条的宽度。这个值是我手动调试得来的。在chrome和IE没发现问题。

方法2：使用三个容器包围起来，不需要计算滚动条的宽度

该代码最早是在Microsoft博客上看到的，跟我上面的思路差不多，只不过人家里面又加多了一个盒子，将内容限制在盒子里面了。这样子就看不到滚动条同时也可以滚动。

代码如下：

<div class="outer-container">

     <div class="inner-container">

        <div class="content">

            ......

        </div>

     </div>

 </div>

.element, .outer-container {

  width: 200px;

  height: 200px;

}

.outer-container {

  border: 5px solid purple;

  position: relative;

  overflow: hidden;

}

.inner-container {

  position: absolute;

  left: 0;

  overflow-x: hidden;

  overflow-y: scroll;

}

.inner-container::-webkit-scrollbar {

  display: none;

}
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style type="text/css">

    .element,

    .outer-container {

        width: 200px;

        height: 200px;

    }

    .outer-container {

        border: 5px solid purple;

        position: relative;

        overflow: hidden;

    }

    .inner-container {

        position: absolute;

        left: 0;

        overflow-x: hidden;

        overflow-y: scroll;

    }

    .inner-container::-webkit-scrollbar {

        display: none;

    }

    </style>

</head>

<body>

    <div class="outer-container">

        <div class="inner-container">

            <div class="element">

                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies. Quisque vitae tincidunt purus. Vivamus feugiat bibendum erat, nec interdum urna porta sed. Nunc lobortis neque orci, ut suscipit nisl congue feugiat. Vivamus feugiat tellus quis cursus sollicitudin. Curabitur dolor massa, dictum ut ipsum in, porttitor pellentesque ante. Aenean egestas cursus tempor. Maecenas semper tortor sit amet egestas cursus. Mauris porttitor quis nisi ut tincidunt. Curabitur adipiscing eleifend nibh. Praesent mauris leo, consequat vitae orci eget, vestibulum bibendum nisi. Aliquam tempus diam ut tortor cursus, eget sodales augue adipiscing. Nulla at dignissim libero.

            </div>

        </div>

    </div>

    <script src="//caibaojian.com/demo/base.js"></script>

</body>

</html>

方法3：css隐藏滚动条

同时该文章还分享了一种通过CSS隐藏滚动条的方法，不过这个方法不兼容IE，做移动端的可以使用。·

那就是自定义滚动条的伪对象选择器::-webkit-scrollbar，详情请看之前的文章：CSS3自定义webkit滚动条样式

chrome 和Safari

.element::-webkit-scrollbar { width: 0 !important }

IE 10+

.element { -ms-overflow-style: none; }

Firefox

.element { overflow: -moz-scrollbars-none; }
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style type="text/css">

    .element{

        width: 200px;

        height: 200px;

        overflow: scroll;

    }

    .element::-webkit-scrollbar { width: 0 !important }

    .element { -ms-overflow-style: none; }

    .element { overflow: -moz-scrollbars-none; }

    </style>

</head>

<body>

    <div class="element">

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies. Quisque vitae tincidunt purus. Vivamus feugiat bibendum erat, nec interdum urna porta sed. Nunc lobortis neque orci, ut suscipit nisl congue feugiat. Vivamus feugiat tellus quis cursus sollicitudin. Curabitur dolor massa, dictum ut ipsum in, porttitor pellentesque ante. Aenean egestas cursus tempor. Maecenas semper tortor sit amet egestas cursus. Mauris porttitor quis nisi ut tincidunt. Curabitur adipiscing eleifend nibh. Praesent mauris leo, consequat vitae orci eget, vestibulum bibendum nisi. Aliquam tempus diam ut tortor cursus, eget sodales augue adipiscing. Nulla at dignissim libero.

    </div>

    <script src="//caibaojian.com/demo/base.js"></script>

</body>

</html>

3种方法实现CSS隐藏滚动条并可以滚动内容的更多相关文章

  1. 实现CSS隐藏滚动条并可以滚动内容

    隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...

  2. CSS实现隐藏滚动条并可以滚动内容

    方法一: 计算滚动条宽度并隐藏起来,其实我只是把滚动条通过定位把它隐藏了起来,下面给一个简化版的代码: <div class="outer-container"> &l ...

  3. css隐藏滚动条依旧可以滚动

    在做企业页面的时候,大部分页面都应该是活的,不应该写死,因为要从后台拿数据进行填充.而后台的数据是不确定的,有时候会让我们的容器撑得很大.这时候我们需要隐藏掉滚动条达到美观或者其他布局效果,隐藏掉单个 ...

  4. css隐藏滚动条

    xhtml中隐藏滚动条在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transi ...

  5. 实现最小宽度的几种方法及CSS Expression[转]

    实现最小宽度的几种方法及CSS Expression[转] 实现最小宽度的几种方法:css表达式尽量不用 支持FF IE7  IE6 .test { background:blue; min-widt ...

  6. css 隐藏滚动条

    如何使用css隐藏滚动条 如何隐藏滚动条,同时仍然可以在任何元素上滚动? 首先,如果需要隐藏滚动条并在内容溢出时显示滚动条,只需要设置overflow:auto样式即可.想要完全隐藏滚动条只需设置ov ...

  7. 如何让css隐藏滚动条 兼容谷歌、火狐、IE等各个浏览器

    项目中,页面效果需要展示一个页面的移动端效果,使用的是一个苹果手机样式背景图,咋也没用过苹果,咋也不敢形容. 如下图所示: 在谷歌浏览器如图一滚动条顺利隐藏,但是火狐就如图二了,有了滚动条丑的一批. ...

  8. css隐藏滚动条 兼容谷歌、火狐、IE等各个浏览器

    项目中,页面效果需要展示一个页面的移动端效果,使用的是一个苹果手机样式背景图,咋也没用过苹果,咋也不敢形容. 如下图所示: 在谷歌浏览器如图一滚动条顺利隐藏,但是火狐就如图二了,有了滚动条丑的一批. ...

  9. 纯css实现隐藏滚动条仍可以滚动

    移动端弹出层加了滚动条之后,滚动条一直在,有些不美观,overflow:hidden;虽然可以隐藏滚动条,但是不能滚动.需要实现隐藏滚动条但是仍可以滚动,js实现太麻烦,直接将滚动条隐藏会更好一些. ...

随机推荐

  1. 使用JMeter进行Apache Kafka负载测试

    1.卡夫卡负载测试 在这个Apache Kafka教程中,我们将了解如何使用Apache JMeter,如何在Apache Kafka上执行Kafka负载测试.此外,这个Kafka负载测试教程教我们如 ...

  2. Spring Cloud初认识

    一.MicroService基本描述 微服务(MicroService)架构产生的原因:解决单体应用框架的缺点. 单体应用(Monolith)框架:所有的代码及功能都包含在一个WAR包中的项目组织方式 ...

  3. quartz2.3.0系列目录——带您由浅入深全面掌握quartz2.3.0

    quartz2.3.0系列目录 官网下载地址:http://www.quartz-scheduler.org/downloads/ 本系列demo全部来源于官网,仅仅是简化和汉化了注释!一部分代码de ...

  4. [洛谷P5323][BJOI2019]光线

    题目大意:有$n$层玻璃,每层玻璃会让$a\%$的光通过,并把$b\%$的光反射.有一束光从左向右射过,问多少的光可以透过这$n$层玻璃 题解:事实上会发现,可以把连续的几层玻璃合成一层玻璃,但是要注 ...

  5. JavaTCP粘包、拆包

    import java.nio.ByteBuffer; import io.netty.bootstrap.ServerBootstrap; import io.netty.buffer.ByteBu ...

  6. SpringCloud--1--服务治理Eureka

    一.Eureka概述 1.Eureka特点 只需通过简单引入依赖和注解配置,就能让SpringBoot构建的微服务应用轻松地与Eureka服务治理体系进行整合. Eureka负责服务治理,即:微服务实 ...

  7. .net core使用ocelot---第七篇 服务发现

    简介 .net core使用ocelot---第一篇 简单使用   .net core使用ocelot---第二篇 身份验证使用  .net core使用ocelot---第三篇 日志记录  .net ...

  8. 可拖拽dialog

    指令的封装转自https://blog.csdn.net/sinat_21902709/article/details/86545444 可拖拽dialog应用于很多弹出框,所以需要作用于全局 在插件 ...

  9. console.log()、console.info()、console.debug()的区别

    onsole.log().console.info().console.debug()的作用都是在浏览器控制台打印信息的. 使用最多的是console.log().console.info()和con ...

  10. 浅析JavaScript异步

    一直以来都知道JavaScript是一门单线程语言,在笔试过程中不断的遇到一些输出结果的问题,考量的是对异步编程掌握情况.一般被问到异步的时候脑子里第一反应就是Ajax,setTimseout...这 ...