我刚刚发现了如何在Google Chrome浏览器中隐藏滚动条,我是用以下代码完成的:
::-webkit-scrollbar { display: none; }
唯一的问题是,这在Firefox上不起作用。尝试了许多方法,但仍然无法正常工作。
我刚刚发现了如何在Google Chrome浏览器中隐藏滚动条,我是用以下代码完成的:
::-webkit-scrollbar { display: none; }
唯一的问题是,这在Firefox上不起作用。尝试了许多方法,但仍然无法正常工作。
Answers:
我可以隐藏滚动条,但仍然可以使用此解决方案使用鼠标滚轮滚动:
html {overflow: -moz-scrollbars-none;}
下载插件https://github.com/brandonaaron/jquery-mousewheel并包含以下功能:
jQuery('html,body').bind('mousewheel', function(event) {
event.preventDefault();
var scrollTop = this.scrollTop;
this.scrollTop = (scrollTop + ((event.deltaY * event.deltaFactor) * -1));
//console.log(event.deltaY, event.deltaFactor, event.originalEvent.deltaMode, event.originalEvent.wheelDelta);
});
layout.css.overflow.moz-scrollbars.enabled
到true
在Firefox的功能设置,使得它不适合用于生产。developer.mozilla.org/zh-CN/docs/Web/CSS/overflow#已
这是我在保留Firefox,Chrome和Edge中的滚动条时需要禁用滚动条的方式:
@-moz-document url-prefix() { /* Disable scrollbar Firefox */
html{
scrollbar-width: none;
}
}
body {
margin: 0; /* remove default margin */
scrollbar-width: none; /* Also needed to disable scrollbar Firefox */
-ms-overflow-style: none; /* Disable scrollbar IE 10+ */
overflow-y: scroll;
}
body::-webkit-scrollbar {
width: 0px;
background: transparent; /* Disable scrollbar Chrome/Safari/Webkit */
}
对于webkit,请使用以下命令:
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
对于Mozilla Firefox,请使用以下代码:
@-moz-document url-prefix() {
html,body{overflow: hidden !important;}
}
如果滚动不起作用,则添加
element {overflow-y: scroll;}
到特定元素
这是一个通用的解决方案:
<div class="outer">
<div class="inner">
Some content...
</div>
</div>
<style>
.outer {
overflow: hidden;
}
.inner {
margin-right: -16px;
overflow-y: scroll;
overflow-x: hidden;
}
</style>
滚动条被父div隐藏。
这需要您在父div中使用overflow:hidden。
对于较新的Firefox版本,旧的解决方案不再起作用,但是我确实在v66.0.3中成功使用了scrollbar-color
您可以设置的属性,该属性transparent transparent
将使桌面上Firefox的滚动条至少不可见(仍然在视口和移动设备上不起作用,但滚动条上的细线位于右侧的内容上方)。
overflow-y: auto; //or hidden if you don't want horizontal scrolling
overflow-y: auto;
scrollbar-color: transparent transparent;
scrollbar-width: none;
不再工作了。我需要隐藏滚动条,而不是使其透明。
我用了它,它起作用了。 https://developer.mozilla.org/zh-CN/docs/Web/CSS/scrollbar-width
html {
scrollbar-width: none;
}
注意:用户代理必须将在根元素上设置的任何滚动条宽度值应用于视口。
::-webkit-scrollbar {
display: none;
}
它在Firefox中不起作用,因为Firefox放弃了对具有功能的隐藏滚动条的支持(您可以overflow: -moz-scrollbars-none;
在旧版本中使用)。
尝试使用此:
overflow-y: -moz-hidden-unscrollable;
scrollbar
但停止滚动动作。overflow-y: -moz-hidden-unscrollable;
和之间有什么区别overflow: hidden
。实际上什么也没有,所以这不是正确的答案。但我给你投票。谢谢。
-2
呢?您的答案是正确的
在某些特定情况下(该元素在屏幕的右侧,或者其父级溢出被隐藏),这可以是一种解决方案:
@-moz-document url-prefix() {
.element {
margin-right: -15px;
}
}
以防万一,如果有人正在寻找黑客,以某种方式使滚动条在firefox(79.0)中不可见。
这是一个可成功用于Chrome,IE,Safari并使Firefox中的滚动条透明的解决方案。上面的这些都没有为firefox(79.0)真正隐藏滚动条。
如果有人在不改变颜色的情况下找到一种方法,请帮忙。请在下面评论。
.scrollhost::-webkit-scrollbar {
display: none;
}
.scrollhost ::-moz-scrollbar {
display: none;
}
.scrollhost {
overflow: auto;
-ms-overflow-style: none;
scrollbar-color: transparent transparent; /*just hides the scrollbar for firefox */
}