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

在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>

其他回答

在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;
}

我碰巧在我的项目中尝试了上述解决方案,由于某些原因,由于div定位,我无法隐藏滚动条。因此,我决定通过引入一个表面覆盖滚动条的div来隐藏滚动条。下面的示例适用于水平滚动条:

<div id="container">
  <div id="content">
     My content that could overflow horizontally
  </div>
  <div id="scroll-cover">
     &nbsp; 
  </div>
</div>

对应的CSS如下:

#container{
   width: 100%;
   height: 100%;
   overflow: hidden;
   position: relative;
}

#content{
  width: 100%;
  height: 100%;
  overflow-x: scroll;
}
#scroll-cover{
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: 0;
  background-color: #fff; /*change this to match color of page*/
}

我加了这个,它对我有用

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

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

只需将子对象的宽度设置为100%,将填充设置为15像素,将overflow-x设置为滚动和溢出:为父对象隐藏,并设置您想要的宽度。

它适用于所有主要浏览器,包括Internet Explorer和Edge,但Internet Explorer 8及更低版本除外。

截至2018年12月11日(Firefox 64及以上版本),这个问题的答案非常简单,因为Firefox 64+现在实现了CSS滚动条样式规范。

只需使用以下CSS:

scrollbar-width: none;

Firefox 64发布说明链接在此。