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

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

在Google Chrome中，它是：

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

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

我也在CSS中尝试过：

overflow: hidden;

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

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

请只使用CSS或HTML。

当前回答

Use:

CSS

#subparent {
    overflow: hidden;
    width: 500px;
    border: 1px rgba(0, 0, 0, 1.00) solid;
}

#parent {
    width: 515px;
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 10%;
}

#child {
    width: 511px;
    background-color: rgba(123, 8, 10, 0.42);
}

HTML

<body>
    <div id="subparent">
        <div id="parent">
            <div id="child">
                <!- Code here for scroll ->
            </div>
        </div>
     </div>
</body>

2015-04-18 17:46:55

其他回答

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

这是一个类似于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

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

2013-05-21 13:22:52

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

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>

2020-09-18 05:57:06

Use:

CSS

#subparent {
    overflow: hidden;
    width: 500px;
    border: 1px rgba(0, 0, 0, 1.00) solid;
}

#parent {
    width: 515px;
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 10%;
}

#child {
    width: 511px;
    background-color: rgba(123, 8, 10, 0.42);
}

HTML

<body>
    <div id="subparent">
        <div id="parent">
            <div id="child">
                <!- Code here for scroll ->
            </div>
        </div>
     </div>
</body>

2015-04-18 17:46:55

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

推荐文章

最新文章

标签