我希望能够滚动整个页面,但不显示滚动条。
在Google Chrome中,它是:
::-webkit-scrollbar {
display: none;
}
但Mozilla Firefox和Internet Explorer似乎不是这样工作的。
我也在CSS中尝试过:
overflow: hidden;
这确实隐藏了滚动条,但我不能再滚动了。
有没有一种方法可以删除滚动条,同时仍然可以滚动整个页面?
请只使用CSS或HTML。
我希望能够滚动整个页面,但不显示滚动条。
在Google Chrome中,它是:
::-webkit-scrollbar {
display: none;
}
但Mozilla Firefox和Internet Explorer似乎不是这样工作的。
我也在CSS中尝试过:
overflow: hidden;
这确实隐藏了滚动条,但我不能再滚动了。
有没有一种方法可以删除滚动条,同时仍然可以滚动整个页面?
请只使用CSS或HTML。
当前回答
要隐藏内容溢出的元素的滚动条,请使用。
.div{
scrollbar-width: none; /* The most elegant way for Firefox */
}
其他回答
Use
function reloadScrollBars() {
document.documentElement.style.overflow = 'auto'; // Firefox, Chrome
document.body.scroll = "yes"; // Internet Explorer only
}
function unloadScrollBars() {
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // Internet Explorer only
}
对于您想要加载、卸载或重新加载滚动条的任何点,调用这些函数。当我在Chrome中测试它时,它仍然可以在Chrome中滚动,但我不确定其他浏览器。
只是一个测试,效果很好。
#parent{
width: 100%;
height: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
box-sizing: content-box; /* So the width will be 100% + 17px */
}
工作Fiddle
JavaScript:
由于不同浏览器的滚动条宽度不同,最好使用JavaScript处理。如果执行Element.offsetWidth-Element.clientWidth,将显示精确的滚动条宽度。
JavaScript工作Fiddle
Or
使用位置:绝对,
#parent{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
overflow-y: scroll;
}
工作Fiddle
JavaScript工作Fiddle
信息:
基于这个答案,我创建了一个简单的滚动插件。
这是我如何做水平滚动;只有CSS,并且可以很好地与Bootstrap/col-*等框架配合使用。它只需要两个额外的div和设置了width或max width的父级:
如果您有触摸屏,您可以选择文本使其滚动或用手指滚动。
.overflow-x-scroll-no滚动条{溢出:隐藏;}.overflow-x-scroll-no-scrollbar div{overflow-x:隐藏;边距底部:-17px;overflow-y:隐藏;宽度:100%;}.overflow-x-scroll-no-scrollbar div*{溢出-x:自动;宽度:100%;填充底部:17px;空白:nowrap;光标:指针}/*下面的类只是为了使示例看起来更好*/.行{宽度:100%}.col-xs-4列{宽度:33%;浮动:左侧}.col-xs-3列{宽度:25%;浮动:左侧}.bg灰色{背景色:#DDDDD}.bg橙色{背景色:#FF9966}.bg蓝色{背景色:#6699FF}.bg橙色灯{背景色:#FFAA88}.bg蓝光{背景色:#88AAFF}<html><body><div class=“row”><div class=“col-xs-4 bg orange”>第1列</div>第2列</div><div class=“col-xs-4 bg blue”>第3列</div></div><div class=“row”><div class=“col-xs-4 bg橙色灯光”>内容1</div><div class=“col-xs-3溢出-x-scroll-no-scrollbar”><div><div>这个内容对于容器来说太长了,所以它需要隐藏,但不需要滚动条就可以滚动</div></div><div class=“col-xs-4 bg蓝光”>内容3</div></div></body></html>
懒人版:
.overflow-x-scroll-no滚动条{溢出:隐藏;}.overflow-x-scroll-no-scrollbar div{overflow-x:隐藏;边距底部:-17px;overflow-y:隐藏;宽度:100%;}.overflow-x-scroll-no-scrollbar div*{溢出-x:自动;宽度:100%;填充底部:17px;空白:nowrap;光标:指针}/*下面的类只是为了使示例看起来更好*/.父样式{宽度:100px;背景色:#FF9966}<div class=“父样式溢出-x-scroll-no-scrollbar”><div><div>这个内容对于容器来说太长了,所以它需要隐藏,但不需要滚动条就可以滚动</div></div>
如果出于某种原因,您希望使用box模型:border box,则向内部div添加填充(如当前接受的答案)将不起作用。
在这两种情况下都有效的方法是将内部div的宽度增加到100%加上滚动条的宽度(假设溢出:隐藏在外部div上)。
例如,在CSS中:
.container2 {
width: calc(100% + 19px);
}
在JavaScript中,跨浏览器:
var child = document.getElementById('container2');
var addWidth = child.offsetWidth - child.clientWidth + "px";
child.style.width = 'calc(100% + ' + addWidth + ')';
Use:
CSS
#subparent {
overflow: hidden;
width: 500px;
border: 1px rgba(0, 0, 0, 1.00) solid;
}
#parent {
width: 515px;
height: 300px;
overflow-y: auto;
overflow-x: hidden;
opacity: 10%;
}
#child {
width: 511px;
background-color: rgba(123, 8, 10, 0.42);
}
HTML
<body>
<div id="subparent">
<div id="parent">
<div id="child">
<!- Code here for scroll ->
</div>
</div>
</div>
</body>