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

在Google Chrome中,它是:

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

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

我也在CSS中尝试过:

overflow: hidden;

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

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

请只使用CSS或HTML。


当前回答

您可以使用下面的代码隐藏滚动条,但仍可以滚动:

.element::-webkit-scrollbar { 
    width: 0 !important 
}

其他回答

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

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

我遇到了这个问题,解决起来非常简单。

取两个容器。内部将是可滚动的容器,外部显然将容纳内部:

#inner_container { width: 102%; overflow: auto; }
#outer_container { overflow: hidden }

它非常简单,适用于任何浏览器。

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

/* 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 */
}

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

.div{

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

这对我有用

div {
  -ms-overflow-style: none; /* Edge, Internet Explorer */
  scrollbar-width: none; /* Firefox */
  overflow-y: scroll;
}

// hides scrollbars while allowing to scroll
div::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}