我希望能够滚动整个页面,但不显示滚动条。
在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。
当前回答
这个棘手的解决方案甚至可以在旧的Internet Explorer web浏览器上使用。
这是[垂直滚动条]的变通方法
<html>
<head>
<style>
html,
body {
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: hidden;
height: 100%;
margin: 0;
}
</style>
</head>
<body id="body" style="overflow:auto;height:100%" onload="document.getElementById('body').style.width=document.body.offsetWidth+20+'px'">
<!--your stuff here-->
</body>
</html>
试试看:jsfiddle
其他回答
以下内容适用于我在Microsoft、Chrome和Mozilla上的特定div元素:
div.rightsidebar {
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar {
width: 0 !important;
}
我只是想分享一个组合片段,用于隐藏开发时使用的滚动条。这是一组在互联网上找到的对我有用的片段:
.container {
overflow-x: scroll; /* For horiz. scroll, otherwise overflow-y: scroll; */
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
scrollbar-width: none;
}
.container::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
.your-overflow-scroll-class::-webkit-scrollbar {
...
width: 0.5rem; //only hide the vertical scrollbar
height: 0px; //only hide the horizontal scrollbar
}
只是一个测试,效果很好。
#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
信息:
基于这个答案,我创建了一个简单的滚动插件。
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>