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

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

在Google Chrome中，它是：

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

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

我也在CSS中尝试过：

overflow: hidden;

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

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

请只使用CSS或HTML。

当前回答

更新：

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

其他回答

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

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

2014-08-03 14:49:08

使用此选项可以隐藏滚动条，但保留功能：

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

隐藏IE、Edge和Firefox的滚动条

.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

2020-06-25 09:54:05

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

除了“溢出”之外，你写的所有内容都是正确的。适用于Chrome和其他浏览器的webkit

overflow-y: scroll;

overflow-y: auto;

对于Firefox和Edge

scrollbar-width: none;

scrollbar-width: thin;

2020-12-10 20:14:35

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

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

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

2014-10-22 04:20:40

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

推荐文章

最新文章

标签