显示滚动条 overflow:auto
隐藏滚动条 overflow:hidden
但是直接使用 overflow:hidden 将导致元素内容不可滚动。时至今日,还没有任何一条CSS规则可以使元素可以隐藏滚动条的同时依然可以滚动内容,只能通过针对特定浏览器设置滚动条样式来实现。文章来源:https://www.toymoban.com/news/detail-804779.html
Firefox浏览器
scrollbar-width: none; /* Firefox */
IE浏览器
-ms-overflow-style: none; /* IE 10+ */
Chrome和Safari浏览器
.infiniteUl::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
并且:要隐藏滚动条的时候,要将overflow显示设置为auto或者scroll保证内容是可滚动的文章来源地址https://www.toymoban.com/news/detail-804779.html
demo
.infiniteUl {
width: 100%;
height: calc(100vh - 120px);
padding: 0;
margin: 0;
overflow: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.infiniteUl::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
到了这里,关于CSS 隐藏滚动条的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!