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

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

在Google Chrome中，它是：

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

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

我也在CSS中尝试过：

overflow: hidden;

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

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

请只使用CSS或HTML。

当前回答

另一个简单的工作小提琴：

#maincontainer {
    background: orange;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

#childcontainer {
    background: yellow;
    position: relative;
    width: 200px;
    height: 200px;
    top: 20px;
    left: 20px;
    overflow: auto;
}

父容器上隐藏溢出，子容器上自动溢出。易于理解的

2014-04-11 03:11:26

其他回答

以下Sass样式应使滚动条在大多数浏览器上透明（不支持Firefox）：

.hide-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;

  &::-webkit-scrollbar {
    width: 1px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
}

2019-12-23 15:56:32

scrollbar-width: none;

为我工作。

2020-12-24 05:46:59

这对我有用：

scroll-content {
    overflow-x: hidden;
    overflow-y: scroll;
}

scroll-content::-webkit-scrollbar {
    width: 0;
}

2019-04-15 10:28:25

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

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

2019-07-07 22:48:15

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

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

推荐文章

最新文章

标签