|
我们经常在前端开发中遇到这种情况，特别是在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;}
| 
