css如何實現滾動條隱藏但鼠標仍然可以滾動

　　在做移動端項目的時候，有些時候需要元素超出屏幕可以滾動，為了美觀需要隱藏滾動條。如果只需兼容chrome和safari，可以使用自定義滾動條的偽對象選擇器——：：webkit-scrollbar。

　　具體使用即： element::webkit-scrollbar{display:none} 或者 element::webkit-scrollbar{width:0!important}

　　那要在pc端實現同樣的功能怎么辦呢？參考 Hiding Vertical Scrollbars with Pure CSS in Chrome, IE (6+), Firefox, Opera, and Safari實現如下：

     html

<div class="outer-container">
 <div class="inner-container">
 <div class="content">
 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>

　　css

.content, .outer-container {
 width: 200px;
 height: 200px;
}
 
.outer-container {
 position: relative;
 overflow: hidden;
}
 
.inner-container {
 position: absolute;
 left: 0;
 overflow-x: scroll;
 overflow-y: scroll;
}
 
.inner-container::-webkit-scrollbar {
 display: none;
}

 

　　該方案的實現原理：給外層的div和主要內容的div設置同樣的寬高，然后.inner-container設置相對於.outer-container絕對定位，這樣.inner-container就脫離了文檔流，寬高子元素撐開，額外設置自己的滾動屬性，但是由於最外層的div寬高固定，故.inner-container的滾動條看不到，事實上是可以滾動的