CSS可以用来隐藏滚动条吗?你会怎么做?
当前回答
我的HTML是这样的:
<div class="container">
<div class="content">
</div>
</div>
将其添加到要隐藏滚动条的div中:
.content {
position: absolute;
right: -100px;
overflow-y: auto;
overflow-x: hidden;
height: 75%; /* This can be any value of your choice */
}
并将其添加到容器中
.container {
overflow-x: hidden;
max-height: 100%;
max-width: 100%;
}
其他回答
如果您正在寻找隐藏移动设备滚动条的解决方案,请遵循Peter的答案!
这里有一个jsfiddle,它使用下面的解决方案隐藏水平滚动条。
.scroll-wrapper{
overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar {
display: none;
}
它在搭载Android 4.0.4的三星平板电脑(冰淇淋三明治,在本机浏览器和Chrome浏览器中)和搭载iOS 6的iPad(在Safari和Chrome浏览器)上进行了测试。
我相信您可以使用溢出CSS属性来操作它,但他们的浏览器支持有限。一位消息人士表示,它是Internet Explorer 5(及更高版本)、Firefox 1.5(及更新版本)和Safari 3(及更晚版本)——也许足以满足您的需求。
滚动,滚动,滚动有很好的讨论。
WebKit支持可以使用标准CSS规则隐藏的滚动条伪元素:
#element::-webkit-scrollbar {
display: none;
}
如果要隐藏所有滚动条,请使用
::-webkit-scrollbar {
display: none;
}
我不确定是否要恢复-这确实有效,但可能有一种正确的方法:
::-webkit-scrollbar {
display: block;
}
当然,您可以始终使用width:0,然后可以使用width:auto轻松恢复,但我不喜欢滥用width来调整可见性。
Firefox 64现在默认支持实验性的滚动条宽度属性(63需要设置配置标志)。要在Firefox 64中隐藏滚动条:
#element {
scrollbar-width: none;
}
要查看当前浏览器是否支持伪元素或滚动条宽度,请尝试以下代码段:
.内容{/*这些规则创造了一个人工封闭的空间我们可以隐藏的滚动条。他们不直接参与隐藏滚动条*/边框:1px灰色虚线;衬垫:.5cm;空白:预换行;高度:5米;overflow-y:滚动;}.内容{/*这是Firefox的神奇之处*/滚动条宽度:无;}.content::-webkit滚动条{/*这是WebKit的神奇之处*/显示:无;}<div class='content'>Lorem ipsum dolor坐amet,consectetur adipiscing elit。Mauris欧盟urna和leo aliquet malesuada ut ac dolor。融合非弧形舌费门特姆索达莱斯是一位智者。安静地坐在委内瑞拉埃格斯塔斯。整数vite tempor enim。在达皮布斯尼塞尔坐amet purus conguetincidunt。Morbi tincidunt ut eros in rutrum。Sed quam erat,福西布斯水平tempor et,元素在tortor。弧形立面的实际自由度莫莉-乌特-智人。苏西庇特厄洛斯,欧盟泰勒斯facilisis a.Vivamus vulputate enim felis,一种直径为euismod的元素不。Duis efficiuit ac elit non-placerat。整数porta-viverra nunc,sed semper ipsum。越南自由贸易区。坐在猫的旁边。Sed impredite,nunc ut portal elementum,厄洛斯·米·埃格斯塔斯·尼布,法利西斯·鲁特鲁姆·萨皮恩·多尔·居斯托。Quisque公司nec magna erat公司。交通工具相(Phasellus vehicula porttitor nulla et dictum)。轿车tincidunt scelersque finibus。麦地那斯(Maecenas consequat massa aliquam pretium)volutpat。Duis elementum magna vel velit elementum,ut scelerisque奥迪奥·福西布斯。</div>
(请注意,这并不是这个问题的正确答案,因为它也隐藏了水平条,但当谷歌将我指向这里时,我正在寻找这一点,所以我想无论如何我都会发布它。)
我的HTML是这样的:
<div class="container">
<div class="content">
</div>
</div>
将其添加到要隐藏滚动条的div中:
.content {
position: absolute;
right: -100px;
overflow-y: auto;
overflow-x: hidden;
height: 75%; /* This can be any value of your choice */
}
并将其添加到容器中
.container {
overflow-x: hidden;
max-height: 100%;
max-width: 100%;
}
我编写了一个WebKit版本,其中包含一些选项,如自动隐藏、小版本、仅滚动-y或仅滚动-x:
._scrollable{
@size: 15px;
@little_version_ratio: 2;
@scrollbar-bg-color: rgba(0,0,0,0.15);
@scrollbar-handler-color: rgba(0,0,0,0.15);
@scrollbar-handler-color-hover: rgba(0,0,0,0.3);
@scrollbar-coner-color: rgba(0,0,0,0);
overflow-y: scroll;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
width: 100%;
height: 100%;
&::-webkit-scrollbar {
background: none;
width: @size;
height: @size;
}
&::-webkit-scrollbar-track {
background-color:@scrollbar-bg-color;
border-radius: @size;
}
&::-webkit-scrollbar-thumb {
border-radius: @size;
background-color:@scrollbar-handler-color;
&:hover{
background-color:@scrollbar-handler-color-hover;
}
}
&::-webkit-scrollbar-corner {
background-color: @scrollbar-coner-color;
}
&.little{
&::-webkit-scrollbar {
background: none;
width: @size / @little_version_ratio;
height: @size / @little_version_ratio;
}
&::-webkit-scrollbar-track {
border-radius: @size / @little_version_ratio;
}
&::-webkit-scrollbar-thumb {
border-radius: @size / @little_version_ratio;
}
}
&.autoHideScrollbar{
overflow-x: hidden;
overflow-y: hidden;
&:hover{
overflow-y: scroll;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
&.only-y{
overflow-y: scroll !important;
overflow-x: hidden !important;
}
&.only-x{
overflow-x: scroll !important;
overflow-y: hidden !important;
}
}
}
&.only-y:not(.autoHideScrollbar){
overflow-y: scroll !important;
overflow-x: hidden !important;
}
&.only-x:not(.autoHideScrollbar){
overflow-x: scroll !important;
overflow-y: hidden !important;
}
}
http://codepen.io/hicTech/pen/KmKrjb