隐藏滚动条，但仍可以滚动

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

在Google Chrome中，它是：

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

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

我也在CSS中尝试过：

overflow: hidden;

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

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

请只使用CSS或HTML。

当前回答

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

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

2015-10-20 15:15:15

其他回答

这将在正文中：

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

2014-04-25 18:58:39

这是一个类似于divitis的解决方案，所有浏览器都可以使用它。。。

标记如下所示，需要位于具有相对定位的内部（其宽度应设置为400像素）：

<div class="hide-scrollbar">
    <div class="scrollbar">
        <div class="scrollbar-inner">

        </div>
    </div>
</div>

CSS：

.hide-scrollbar {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.scrollbar {
    overflow-y: scroll;
    position: absolute;
    top: 0;
    left: 0;
    right: -50px;
    bottom: 0;
}

.scrollbar-inner {
    width: 400px;
}

2016-11-12 21:34:08

这是我如何做水平滚动；只有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>

2016-12-07 15:18:17

更新：

Firefox现在支持使用CSS隐藏滚动条，因此所有主要浏览器（Chrome、Firefox、Internet Explorer、Safari等）都已覆盖。

只需将以下CSS应用于要删除滚动条的元素：

.container {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

这是我目前所知的最简单的跨浏览器解决方案。查看演示。

原始答案：

这是另一种尚未提及的方式。它非常简单，只涉及两个div和CSS。不需要JavaScript或专有CSS，它适用于所有浏览器。它也不需要显式设置容器的宽度，从而使其成为流体。

此方法使用负边距将滚动条移出父级，然后使用相同的填充量将内容推回到其原始位置。该技术适用于垂直、水平和双向滚动。

演示：

竖的水平的两个方向

垂直版本的示例代码：

HTML格式：

<div class="parent">
  <div class="child">
    Your content.
  </div>
</div>

CSS:

.parent {
  width: 400px;
  height: 200px;
  border: 1px solid #AAA;
  overflow: hidden;
}

.child {
  height: 100%;
  margin-right: -50px; /* Maximum width of scrollbar */
  padding-right: 50px; /* Maximum width of scrollbar */
  overflow-y: scroll;
}

2018-03-14 12:57:38

我碰巧在我的项目中尝试了上述解决方案，由于某些原因，由于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*/
}

2018-01-15 09:03:50

隐藏滚动条，但仍可以滚动

推荐文章

最新文章

标签