我希望能够滚动整个页面,但不显示滚动条。
在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。
当前回答
截至2018年12月11日(Firefox 64及以上版本),这个问题的答案非常简单,因为Firefox 64+现在实现了CSS滚动条样式规范。
只需使用以下CSS:
scrollbar-width: none;
Firefox 64发布说明链接在此。
其他回答
这个棘手的解决方案甚至可以在旧的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
这对我来说适用于简单的CSS财产:
.container {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.container::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
对于旧版本的Firefox,请使用:overflow:-moz滚动条none;
我加了这个,它对我有用
-ms溢出样式:无;/*IE和Edge*/滚动条宽度:无;/*Firefox浏览器*/
裁判:https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp
只需将子对象的宽度设置为100%,将填充设置为15像素,将overflow-x设置为滚动和溢出:为父对象隐藏,并设置您想要的宽度。
它适用于所有主要浏览器,包括Internet Explorer和Edge,但Internet Explorer 8及更低版本除外。
这将在正文中:
<div id="maincontainer" >
<div id="child">this is the 1st step</div>
<div id="child">this is the 2nd step</div>
<div id="child">this is the 3rd step</div>
</div>
这是CSS:
#maincontainer
{
background: grey;
width: 101%;
height: 101%;
overflow: auto;
position: fixed;
}
#child
{
background: white;
height: 500px;
}