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

在Google Chrome中,它是:

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

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

我也在CSS中尝试过:

overflow: hidden;

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

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

请只使用CSS或HTML。


当前回答

以下Sass样式应使滚动条在大多数浏览器上透明(不支持Firefox):

.hide-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;

  &::-webkit-scrollbar {
    width: 1px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
}

其他回答

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中测试)。

另一个简单的工作小提琴:

#maincontainer {
    background: orange;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

#childcontainer {
    background: yellow;
    position: relative;
    width: 200px;
    height: 200px;
    top: 20px;
    left: 20px;
    overflow: auto;
}

父容器上隐藏溢出,子容器上自动溢出。易于理解的

我只是想分享一个组合片段,用于隐藏开发时使用的滚动条。这是一组在互联网上找到的对我有用的片段:

.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 */
}
.className::-webkit-scrollbar{
    display: none;
}

除了“溢出”之外,你写的所有内容都是正确的。适用于Chrome和其他浏览器的webkit

overflow-y: scroll;

or

overflow-y: auto;

对于Firefox和Edge

scrollbar-width: none;

or

scrollbar-width: thin;

以下内容适用于我在Microsoft、Chrome和Mozilla上的特定div元素:

div.rightsidebar {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar { 
    width: 0 !important;
}