文章转自--https://www.cnblogs.com/alice626/p/6206760.html
CSS 实现隐藏滚动条同时又可以滚动
移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动?
使用 overflow:hidden
隐藏滚动条,但存在的问题是:页面或元素失去了滚动的特性。
由于只需要兼容移动浏览器(Chrome 和 Safari),于是想到了自定义滚动条的伪对象选择器::-webkit-scrollbar
。
关于这个选择器的介绍可以参考:
Styling Scrollbars
Custom Scrollbars in WebKit
应用如下 CSS 可以隐藏滚动条:
.element::-webkit-scrollbar {display:none}
如果要兼容 PC 其他浏览器(IE、Firefox 等),国外一位才人 John Kurlak 也研究出了一种办法。在容器外面再嵌套一层 overflow:hidden
内部内容再限制尺寸和外部嵌套层一样,就变相隐藏了。
<div class="outer-container">
<div class="inner-container">
<div class="content">
....../*这里放div。自己要显示的东西*/
</div>
</div>
</div>
.outer-container,.content {
width: 200px; height: 200px;
}
.outer-container {
position: relative;
overflow: hidden;
}
.inner-container {
position: absolute; left: 0;
overflow-x: hidden;
overflow-y: scroll;
}
/* for Chrome */
.inner-container::-webkit-scrollbar {
display: none;
}
参考:Hiding Vertical Scrollbars with Pure CSS in Chrome, IE (6+), Firefox, Opera, and Safari
https://blog.niceue.com/front-end-development/hide-scrollbar-but-still-scrollable-using-css.html
参考中老外的想法代码:
HTML
<div class="outer-container">
<div class="inner-container">
<div class="element">
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
.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;
}
下一篇:
CSS 实现隐藏滚动条同时又可以滚动--也可以做自定义的滚动条(3)-- 实现(普通版)
上一篇: