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

在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;
  }
}

其他回答

这对我来说适用于简单的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;

要隐藏内容溢出的元素的滚动条,请使用。

.div{

  scrollbar-width: none; /* The most elegant way for Firefox */
}

这个帖子已经得到了很多人的回复,但我觉得它的解决方案可能会简单得多。

/* Hide scrollbar for Chrome, Safari and Opera */

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

/* Hide scrollbar for Internet Explorer, Edge and Firefox */

.container {
    -ms-overflow-style: none;  /* Internet Explorer and Edge */
    scrollbar-width: none;  /* Firefox */
}

}

注意:上面的方法只会删除滚动条的可见性,但它仍然可以正常工作。如果您想删除滚动功能,则可以使用以下选项:

container {
  overflow-y: hidden; /* Hide vertical scrollbar */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}

这是一个类似于divitis的解决方案,所有浏览器都可以使用它。。。

标记如下所示,需要位于具有相对定位的内部(其宽度应设置为400像素):

<div class="hide-scrollbar">
    <div class="scrollbar">
        <div class="scrollbar-inner">

        </div>
    </div>
</div>

CSS:

.hide-scrollbar {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.scrollbar {
    overflow-y: scroll;
    position: absolute;
    top: 0;
    left: 0;
    right: -50px;
    bottom: 0;
}

.scrollbar-inner {
    width: 400px;
}

只需使用以下三行,您的问题就会得到解决:

#liaddshapes::-webkit-scrollbar {
    width: 0 !important;
}

其中liaddshapes是要滚动的div的名称。