3种方法实现CSS隐藏滚动条并能够滚动内容

时间 2019-11-10

标签方法实现 css 隐藏滚动条并能滚动内容栏目 CSS 繁體版

原文原文链接

隐藏滚动条的同时还须要支持滚动，咱们常常在前端开发中遇到这种状况，最容易想到的是加一个iscroll插件，但其实如今CSS也能够实现这个功能，我已经在不少地方使用了，下面一块儿看看这三种方法。css

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

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

<!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>

View Code

下面给一个简化版的代码vue

<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>

View Code

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

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

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

代码以下：web

<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>

View Code

方法3：css隐藏滚动条面试

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

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

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>

View Code