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

在Google Chrome中,它是:

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

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

我也在CSS中尝试过:

overflow: hidden;

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

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

请只使用CSS或HTML。


当前回答

我加了这个,它对我有用

-ms溢出样式:无;/*IE和Edge*/滚动条宽度:无;/*Firefox浏览器*/

裁判:https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

其他回答

这对我有用:

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

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

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中滚动,但我不确定其他浏览器。

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

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

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

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

.your-overflow-scroll-class::-webkit-scrollbar {
  ...
  width: 0.5rem; //only hide the vertical scrollbar
  height: 0px; //only hide the horizontal scrollbar
}

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

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