我希望能够滚动整个页面,但不显示滚动条。

在Google Chrome中,它是:

::-webkit-scrollbar {
    display: none;
}

但Mozilla Firefox和Internet Explorer似乎不是这样工作的。

我也在CSS中尝试过:

overflow: hidden;

这确实隐藏了滚动条,但我不能再滚动了。

有没有一种方法可以删除滚动条,同时仍然可以滚动整个页面?

请只使用CSS或HTML。


当前回答

HTML格式:

<div class="parent">
    <div class="child">
    </div>
</div>

CSS:

.parent{
    position: relative;
    width: 300px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}

.child {
    height: 150px;   
    width: 318px;
    overflow-y: scroll;
}

相应地应用CSS。

在这里检查(在Internet Explorer和Firefox中测试)。

其他回答

只是一个测试,效果很好。

#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

function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';  // Firefox, Chrome
    document.body.scroll = "yes"; // Internet Explorer only
}

function unloadScrollBars() {
    document.documentElement.style.overflow = 'hidden';  // firefox, chrome
    document.body.scroll = "no"; // Internet Explorer only
}

对于您想要加载、卸载或重新加载滚动条的任何点,调用这些函数。当我在Chrome中测试它时,它仍然可以在Chrome中滚动,但我不确定其他浏览器。

如果出于某种原因,您希望使用box模型:border box,则向内部div添加填充(如当前接受的答案)将不起作用。

在这两种情况下都有效的方法是将内部div的宽度增加到100%加上滚动条的宽度(假设溢出:隐藏在外部div上)。

例如,在CSS中:

.container2 {
    width: calc(100% + 19px);
}

在JavaScript中,跨浏览器:

var child = document.getElementById('container2');
var addWidth = child.offsetWidth - child.clientWidth + "px";
child.style.width = 'calc(100% + ' + addWidth + ')';

只需将子对象的宽度设置为100%,将填充设置为15像素,将overflow-x设置为滚动和溢出:为父对象隐藏,并设置您想要的宽度。

它适用于所有主要浏览器,包括Internet Explorer和Edge,但Internet Explorer 8及更低版本除外。

这对我有用:

scroll-content {
    overflow-x: hidden;
    overflow-y: scroll;
}

scroll-content::-webkit-scrollbar {
    width: 0;
}