隐藏滚动条，但仍然能够滚动。

Question

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

在Google Chrome中：

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

但是Mozilla Firefox和Internet Explorer似乎不像那样工作。

我也试过在CSS中这样做：

overflow: hidden;

这确实隐藏了滚动条，但我无法再滚动页面了。

是否有一种方法可以在仍然能够滚动整个页面的情况下删除滚动条？

请使用纯CSS或HTML实现。

- Oussama el Bachiri

---

Webkit-scrollbar在其他浏览器上不起作用吗？ - Franz

添加 ::-webkit-scrollbar 会改变数据结束的部分的背景颜色。即使将 background-color 属性设置为白色，也不会改变任何内容。 - Priya

Answer 1

只是一个测试，运行良好。

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

可工作的 Fiddle

JavaScript：

由于不同浏览器中滚动条宽度不同，最好使用 JavaScript 处理。如果您执行 Element.offsetWidth - Element.clientWidth，则会显示出确切的滚动条宽度。

JavaScript 可工作的 Fiddle

或者

使用 position: absolute，

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

#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
}

可运行的代码示例

JavaScript 可运行的代码示例

信息：

基于这个答案，我创建了一个简单的滚动插件。

- Mr_Green

---

在你上一个“工作代码”中，我看到了太多的!important，所以我已经将它们全部删除了：http://jsfiddle.net/5GCsJ/954/。 - Roko C. Buljan

这种方法不能覆盖所有浏览器，并且会非常具体地针对您在开发过程中使用的浏览器版本。 - Itsik Avidan

为什么要复杂计算滚动条的宽度？只需设置box-sizing: border-box; width: calc(100% + 50px);，并为填充设置相同的值即可。没有浏览器有50像素的滚动条宽度/高度，因此它应该简单地覆盖所有浏览器... - Robert Koritnik

@RobertKoritnik，我对你的想法没有任何问题，但是它的表达方式让我想尖叫“接受挑战！”并制作一个带有最柔软滚动条的浏览器。 - Brian Davis

惊人的答案，我喜欢它。 - Jishnu V S

Answer 2

对于简单的 CSS 属性，这对我有效：

.container {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.container::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

对于旧版Firefox，请使用：overflow: -moz-scrollbars-none;

- Hristo Eftimov

---

对于我来说，overflow: -moz-scrollbars-none 可以隐藏 Firebox 浏览器中的滚动条，但也会禁用滚动功能。你能提供一个演示网站，以便我看一下这个属性是如何工作的吗？ - chipit24

很遗憾，最新版本的Firefox已经删除了“-moz-scrollbars-none”属性：https://developer.mozilla.org/en-US/docs/Web/CSS/overflow - Hristo Eftimov

自 iOS8 起，在使用 -webkit-overflow-scrolling: touch 时，这个功能不再有效。 - aleclarson

对于已过时的Firefox -moz-scrollbars-none，你可以使用@-moz-document url-prefix() { .container { overflow: hidden; } }。参见https://dev59.com/tXNA5IYBdhLWcg3wdtld#953491。 - Martin Ždila

我已更新我的回答，支持最新的Firefox :) - Hristo Eftimov

Answer 3

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

- Anirban Bhui

---

在 Cordova 应用程序中尝试过这个，效果很好。必须将 overflow:scroll 应用于元素。 - Kishor Pawar

不适用于Firefox，这很明显是因为它只支持Webkit内核。谢谢 :) - Zohair

正如预期的那样，它在 Electron 应用程序中表现出色，因为它们都是基于 Chromium 构建的。+1 谢谢 :D - rococo

自从iOS8以来，当与“-webkit-overflow-scrolling: touch”一起使用时，这个功能就无法正常工作。 - aleclarson

它可以在谷歌浏览器上运行，但无法在Mozilla Firefox上运行。 - romal tandel

Answer 4

更新:

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

这是我目前所知道的最不“hacky”的跨浏览器解决方案。请查看演示。

---

这里有另一种方法，还没有被提到过。它非常简单，只涉及两个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;
}

- Richrd

---

scrollbar-width: none 在 Firefox 91 中无效。 - Iter Ator

@IterAtor 但在我的版本（Firefox 97）中可以正常工作。 - S.Serpooshan

我喜欢这个答案！我的唯一问题是它留下了一个1像素宽的微型滚动条。 - Ian Jaspers

Answer 5

使用：

<div style='overflow:hidden; width:500px;'>
   <div style='overflow:scroll; width:508px'>
      My scroll-able area
   </div>
</div>

这是一种技巧，可以使具有重叠div的滚动条有所重叠，而该div没有任何滚动条：

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

这仅适用于WebKit浏览器... 或者你可以使用特定于浏览器的CSS内容（如果将来有的话）。每个浏览器都可能具有不同和特定的属性用于其各自的滚动条。

对于Microsoft Edge，请使用：-ms-overflow-style：-ms-autohiding-scrollbar; 或 -ms-overflow-style：none; 如MSDN所述。

Firefox没有相应的功能。虽然有一个jQuery插件可以实现此功能，http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

- Arpit Singh

---

这个网站@Oussama Dobby使用media='screen'，然后使用'::-webkit-scrollbar'属性来进行CSS。 - Arpit Singh

那么具体的CSS属性是什么？ - Oussama el Bachiri

要么使用一个不太优雅的布局方式，要么使用jQuery作为替代方案。 - Arpit Singh

你的第一个解决方案给了我这个问题s24.postimg.org/idul8zx9w/Naamloos.jpg。还有，@ArpitSingh所说的hacky layout是什么意思？ - Oussama el Bachiri

以下是我在 Cordova 中，使用 jQuery Mobile 1.4 在 iOS7 和 iOS8 上启用本地滚动的方法：// CSS
::-webkit-scrollbar { display: none; } .ui-content { -webkit-overflow-scrolling: touch; } // jQuery Mobile onMobileInit()
$.mobile.touchOverflowEnabled = true; 为了启用本地滚动，需要在 CSS 中添加以上两行代码，并在 jQuery Mobile 的 onMobileInit() 方法中设置 $.mobile.touchOverflowEnabled 为 true。 - Ryan Williams

这比我想象的要容易得多。但是你如何让IE理解这些是两个不同的东西：overflow-y:scroll; overflow-x:visible; D: - user1566694

Answer 6

此外，对于所有浏览器，需要无滚动条滚动。

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>

- Majedur

---

SCSS版本中缺少一个&符号：&::-webkit-scrollbar { display: none; }。该符号用于将父选择器嵌套到子选择器中，以便正确地应用样式。 - Perrier

Answer 7

使用此方法可以隐藏滚动条，但保持其功能：

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

隐藏 IE、Edge 和 Firefox 的滚动条

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

- Wael Khalifa

---

在我看来，这是最好的答案。以下是我找到的源代码，可以隐藏滚动条，同时保持所提到的每个浏览器的功能。https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp - Webalation

Answer 8

这个回答没有包括代码，所以这里提供了一个来自页面的解决方案：

根据该页面，这种方法不需要预先知道滚动条的宽度就可以工作，并且该解决方案适用于所有浏览器，可以在这里看到。

好处在于，您不必强制使用填充或宽度差异来隐藏滚动条。

这也是缩放安全的。填充/宽度解决方案在缩小到最小时会显示滚动条。

Firefox修复：http://jsbin.com/mugiqoveko/1/edit?output

.element,
.outer-container {
  width: 200px;
  height: 200px;
}
.outer-container {
  border: 5px solid purple;
  position: relative;
  overflow: hidden;
}
.inner-container {
  position: absolute;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-right: 150px;
}
.inner-container::-webkit-scrollbar {
  display: none;
}

<div class="outer-container">
  <div class="inner-container">
    <div class="element">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut
      dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique
      aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie
      vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies.
    </div>
  </div>
</div>

- Timo Kähkönen

---

这不适用于所有浏览器... 只适用于 Webkit 浏览器。您正在使用 Webkit 特定的选择器 ::-webkit-scrollbar {}。 - tdc

我在回答问题之前在所有新的浏览器中进行了测试，包括FF。FF发生了一些变化吗？ - Timo Kähkönen

我更新了答案。似乎添加 padding-right: 150px; 可以解决它。在 FF、Chrome、Safari 和 Edge 中进行了测试。由于有很大的右填充，所以在低缩放级别下也可以工作。 - Timo Kähkönen

Edge、IE 11、IE10（可能还包括更低版本）支持 html { -ms-overflow-style: none;}。在这些浏览器中，无需使用 padding-hack。 - Timo Kähkönen

自 iOS8 开始，当与 -webkit-overflow-scrolling: touch 一起使用时，这将不起作用。 - aleclarson

Answer 9

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

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

liaddshapes 是包含滚动条的 div 的名称。

- Innodel

---

在fiddle中展示你的问题。 - Innodel

简单易用，谢谢！我使用了{display:none}而不是{width:0;}，同样有效。 - santillanix

Answer 10

这对我来说是跨浏览器可用的。然而，在移动浏览器上，这不能隐藏本地滚动条。

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

- Murhaf Sousli

---

嵌套块（{}）是什么意思？它应该如何解释？还有 &？请在您的回答中详细说明。 - Peter Mortensen

这是一个SASS的事情（显然，LESS也是）：https://css-tricks.com/the-sass-ampersand/ - vipatron

@PeterMortensen 我刚刚看到了你的评论，CSS中的&::-webkit-scrollbar变成了.hide-native-scrollbar::-webkit-scrollbar { }。 - Murhaf Sousli

针对 iOS，请在 ::-webkit-scrollbar 上使用 { width: 0; height: 0; }，而不是使用 display: none。 - adriendenat

在FF71中，这将阻止所有滚动。 - gene b.