我希望能够滚动整个页面,但不显示滚动条。
在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。
当前回答
只需将子对象的宽度设置为100%,将填充设置为15像素,将overflow-x设置为滚动和溢出:为父对象隐藏,并设置您想要的宽度。
它适用于所有主要浏览器,包括Internet Explorer和Edge,但Internet Explorer 8及更低版本除外。
其他回答
只是一个测试,效果很好。
#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
信息:
基于这个答案,我创建了一个简单的滚动插件。
要隐藏内容溢出的元素的滚动条,请使用。
.div{
scrollbar-width: none; /* The most elegant way for Firefox */
}
我的问题是:我不想在HTML内容中使用任何样式。我希望我的身体可以直接滚动,没有任何滚动条,只有一个垂直滚动,可以使用CSS网格来适应任何屏幕大小。
框大小调整值影响填充或边距解决方案,它们与框大小调整一起工作:内容框。
我仍然需要“-moz scrollbars none”指令,像gdoron和Mr_Green一样,我必须隐藏滚动条。我尝试了-moz转换和-moz填充启动,只影响Firefox,但有一些响应性的副作用需要做太多的工作。
此解决方案适用于具有“display:grid”样式的HTML正文内容,并且具有响应性。
/* Hide HTML and body scroll bar in CSS grid context */
html, body {
position: static; /* Or relative or fixed ... */
box-sizing: content-box; /* Important for hidding scrollbar */
display: grid; /* For CSS grid */
/* Full screen */
width: 100vw;
min-width: 100vw;
max-width: 100vw;
height: 100vh;
min-height: 100vh;
max-height: 100vh;
margin: 0;
padding: 0;
}
html {
-ms-overflow-style: none; /* Internet Explorer 10+ */
overflow: -moz-scrollbars-none; /* Should hide the scroll bar */
}
/* No scroll bar for Safari and Chrome */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
display: none; /* Might be enough */
background: transparent;
visibility: hidden;
width: 0px;
}
/* Firefox only workaround */
@-moz-document url-prefix() {
/* Make HTML with overflow hidden */
html {
overflow: hidden;
}
/* Make body max height auto */
/* Set right scroll bar out the screen */
body {
/* Enable scrolling content */
max-height: auto;
/* 100vw +15px: trick to set the scroll bar out the screen */
width: calc(100vw + 15px);
min-width: calc(100vw + 15px);
max-width: calc(100vw + 15px);
/* Set back the content inside the screen */
padding-right: 15px;
}
}
body {
/* Allow vertical scroll */
overflow-y: scroll;
}
另一个简单的工作小提琴:
#maincontainer {
background: orange;
width: 200px;
height: 200px;
overflow: hidden;
}
#childcontainer {
background: yellow;
position: relative;
width: 200px;
height: 200px;
top: 20px;
left: 20px;
overflow: auto;
}
父容器上隐藏溢出,子容器上自动溢出。易于理解的
只需使用以下三行,您的问题就会得到解决:
#liaddshapes::-webkit-scrollbar {
width: 0 !important;
}
其中liaddshapes是要滚动的div的名称。