首页 > 代码库 > css如何实现滚动条隐藏但鼠标仍然可以滚动
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的滚动条看不到,事实上是可以滚动的
css如何实现滚动条隐藏但鼠标仍然可以滚动
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。