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的滚动条看不到，事实上是可以滚动的

 

转载于:https://www.cnblogs.com/erduyang/p/6821365.html