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

在Google Chrome中,它是:

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

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

我也在CSS中尝试过:

overflow: hidden;

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

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

请只使用CSS或HTML。


当前回答

这是我如何做水平滚动;只有CSS,并且可以很好地与Bootstrap/col-*等框架配合使用。它只需要两个额外的div和设置了width或max width的父级:

如果您有触摸屏,您可以选择文本使其滚动或用手指滚动。

.overflow-x-scroll-no滚动条{溢出:隐藏;}.overflow-x-scroll-no-scrollbar div{overflow-x:隐藏;边距底部:-17px;overflow-y:隐藏;宽度:100%;}.overflow-x-scroll-no-scrollbar div*{溢出-x:自动;宽度:100%;填充底部:17px;空白:nowrap;光标:指针}/*下面的类只是为了使示例看起来更好*/.行{宽度:100%}.col-xs-4列{宽度:33%;浮动:左侧}.col-xs-3列{宽度:25%;浮动:左侧}.bg灰色{背景色:#DDDDD}.bg橙色{背景色:#FF9966}.bg蓝色{背景色:#6699FF}.bg橙色灯{背景色:#FFAA88}.bg蓝光{背景色:#88AAFF}<html><body><div class=“row”><div class=“col-xs-4 bg orange”>第1列</div>第2列</div><div class=“col-xs-4 bg blue”>第3列</div></div><div class=“row”><div class=“col-xs-4 bg橙色灯光”>内容1</div><div class=“col-xs-3溢出-x-scroll-no-scrollbar”><div><div>这个内容对于容器来说太长了,所以它需要隐藏,但不需要滚动条就可以滚动</div></div><div class=“col-xs-4 bg蓝光”>内容3</div></div></body></html>

懒人版:

.overflow-x-scroll-no滚动条{溢出:隐藏;}.overflow-x-scroll-no-scrollbar div{overflow-x:隐藏;边距底部:-17px;overflow-y:隐藏;宽度:100%;}.overflow-x-scroll-no-scrollbar div*{溢出-x:自动;宽度:100%;填充底部:17px;空白:nowrap;光标:指针}/*下面的类只是为了使示例看起来更好*/.父样式{宽度:100px;背景色:#FF9966}<div class=“父样式溢出-x-scroll-no-scrollbar”><div><div>这个内容对于容器来说太长了,所以它需要隐藏,但不需要滚动条就可以滚动</div></div>

其他回答

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

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

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

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

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

此外,所有浏览器都可以在没有滚动条的情况下滚动。

CSS

.keep-scrolling {
  background-color: #EEE;
  width: 200px;
  height: 100px;
  border: 1px dotted black;
  overflow-y: scroll; /* Add the ability to scroll the y axis */
}

/* Hide the scrollbar for Chrome, Safari and Opera */
.keep-scrolling::-webkit-scrollbar {
  display: none;
}

/* Hide the scrollbar for Internet Explorer, Edge and Firefox */
.keep-scrolling {
  -ms-overflow-style: none;  /* Internet Explorer and Edge */
  scrollbar-width: none;  /* Firefox */
}

SCSS

.keep-scrolling {
    background-color: #EEE;
    width: 200px;
    height: 100px;
    border: 1px dotted black;
    overflow-y: scroll; /* Add the ability to scroll the y axis */

    /* Hide the scrollbar for Internet Explorer, Edge and Firefox */
    -ms-overflow-style: none;  /* Internet Explorer and Edge */
    scrollbar-width: none;  /* Firefox */

    /* Hide the scrollbar for Chrome, Safari and Opera */
    &::-webkit-scrollbar {
       display: none;
    }
}

HTML

<div class="keep-scrolling">
</div>

只需编写以下代码:

::-webkit-scrollbar {
  width: 0px;
}

Or

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