隐藏滚动条,但仍然可以滚动 [英] Hide scroll bar, but still being able to scroll
问题描述
在Google Chrome浏览器中,
$ b $ b
:: - webkit-scrollbar {
display:none;
}
但是Mozilla Firefox和Internet Explorer似乎没有这样的工作。 / p>
我也尝试过
css:
overflow:hidden ;
这隐藏了滚动条,但我不能再滚动了。
有没有我可以删除滚动条,仍然能够滚动整个页面?
只需css或html即可。
只是一个工作正常的测试。
$ b
#parent {
height:100%;
width:100%;
overflow:hidden;
}
#child {
width:100%;
height:100%;
overflow-y:scroll;
padding-right:17px; / *为跨浏览器兼容性增加/减少此值* /
}
JavaScript:
由于滚动条宽度在不同的浏览器中不同,最好使用JavaScript处理它。如果你做 Element.offsetWidth - Element.clientWidth
,将会显示确切的滚动条宽度。
或
使用位置:绝对
,
#parent {
height:100%;
width:100%;
overflow:hidden;
position:relative;
}
#child {
position:absolute;
top:0;
bottom:0;
left:0;
right:-17px; / *增加/减小此值以实现跨浏览器兼容性* /
overflow-y:scroll;
}
信息:
,我创建了一个简单的滚动插件。我希望这将帮助某人。
I want to be able to scroll through the whole page, but without the scrollbar being showed.
In Google Chrome it's
::-webkit-scrollbar {
display: none;
}
But Mozilla Firefox and Internet Explorer don't seem to work like that.
I also tried css:
overflow: hidden;
That does hide the scrollbar, but I cant scroll anymore.
Is there anyway I can remove the scrollbar and still being able to scroll the whole page? With just css or html please.
Just a test which is working fine.
#parent{
height: 100%;
width: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
}
JavaScript:
Since, the scrollbar width differs in different browsers, it is better to handle it with JavaScript. If you do Element.offsetWidth - Element.clientWidth
, the exact scrollbar width will show up.
or
Using Position: absolute
,
#parent{
height: 100%;
width: 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;
}
Info:
Based on this answer, I created a simple scroll plugin. I hope this will help someone.
这篇关于隐藏滚动条,但仍然可以滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!