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

在Google Chrome中,它是:

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

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

我也在CSS中尝试过:

overflow: hidden;

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

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

请只使用CSS或HTML。


当前回答

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

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

overflow-y: scroll;

or

overflow-y: auto;

对于Firefox和Edge

scrollbar-width: none;

or

scrollbar-width: thin;

其他回答

我加了这个,它对我有用

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

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

以下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;
  }
}

在WebKit中使用可选样式很简单:

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}
scrollbar-width: none; 

为我工作。

这个棘手的解决方案甚至可以在旧的Internet Explorer web浏览器上使用。

这是[垂直滚动条]的变通方法

<html>

<head>
  <style>
    html,
    body {
      overflow: -moz-scrollbars-vertical;
      overflow-x: hidden;
      overflow-y: hidden;
      height: 100%;
      margin: 0;
    }
  </style>
</head>

<body id="body" style="overflow:auto;height:100%" onload="document.getElementById('body').style.width=document.body.offsetWidth+20+'px'">
  <!--your stuff here-->
</body>

</html>

试试看:jsfiddle