CSS基础 - 实现隐藏滚动条并可以滚动内容效果

我们经常在前端开发中遇到这种情况，特别是在H5移动端页面开发时，经常需要隐藏滚动条的同时还需要支持滚动，今天就来聊聊CSS实现这个功能，我已经在很多地方使用了，下面一起看看这三种方法。

第一种方法：

要在CSS中实现元素的水平滚动同时隐藏滚动条，可以使用以下方法：对于支持Webkit内核的浏览器（如Chrome、Safari），可以使用：：-webkit-scrollbar伪元素来隐藏滚动条。

以下是实现水平滚动并隐藏滚动条的CSS代码示例：

CSS

.scroll-container {
overflow-x: auto;
white-space: nowrap;
}
 
.scroll-container:：-webkit-scrollbar {
display: none；/*对于Webkit内核浏览器隐藏滚动条*/
}

HTML结构：

Markup

<div class=“scroll-container”>
<！--属性过多，需要水平滚动显示-->
<div class=“content”>
<！--属性内联显示，不换行-->
…
</div>
</div>

这样，.scroll-container内的属性就可以水平滚动，而滚动条不会显示。

第二种方法

计算滚动条宽度并隐藏起来

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

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

JavaScript

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

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

第三种方法

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

代码如下：

JavaScript

<div class="outer-container">
     <div class="inner-container">
        <div class="content">
            ......
        </div>
     </div>
 </div>
//code from http://caibaojian.com/hide-scrollbar.HTML
.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;
}