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

在Google Chrome中,它是:

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

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

我也在CSS中尝试过:

overflow: hidden;

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

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

请只使用CSS或HTML。


当前回答

这将在正文中:

<div id="maincontainer" >
    <div id="child">this is the 1st step</div>
    <div id="child">this is the 2nd step</div>
    <div id="child">this is the 3rd step</div>
</div>

这是CSS:

#maincontainer
{
    background: grey;
    width: 101%;
    height: 101%;
    overflow: auto;
    position: fixed;
}

#child
{
    background: white;
    height: 500px;
}

其他回答

这适用于我的跨浏览器。然而,这不会在移动浏览器上隐藏本机滚动条。

在SCSS中

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
  &::-webkit-scrollbar { /** WebKit */
    display: none;
  }
}

在CSS中

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
}
.hide-native-scrollbar::-webkit-scrollbar { /** WebKit */
  display: none;
}

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

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

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

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

Use:

<div style='overflow:hidden; width:500px;'>
   <div style='overflow:scroll; width:508px'>
      My scroll-able area
   </div>
</div>

这是一个技巧,可以将滚动条与没有滚动条的重叠div稍微重叠:

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

这仅适用于WebKit浏览器。。。或者您可以使用浏览器特定的CSS内容(如果将来有)。每个浏览器可以为其各自的栏设置不同的特定属性。

对于Microsoft Edge,使用:-ms溢出样式:-ms自动隐藏滚动条;或-ms溢出样式:无;根据MSDN。

Firefox没有同等的功能。尽管有一个jQuery插件来实现这一点,http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

这将在正文中:

<div id="maincontainer" >
    <div id="child">this is the 1st step</div>
    <div id="child">this is the 2nd step</div>
    <div id="child">this is the 3rd step</div>
</div>

这是CSS:

#maincontainer
{
    background: grey;
    width: 101%;
    height: 101%;
    overflow: auto;
    position: fixed;
}

#child
{
    background: white;
    height: 500px;
}