隐藏HTML页面上的滚动条

Question

CSS可以用来隐藏滚动条吗？如何实现这个效果？

- ANP

---

@UweKeim，IE11没有任何技巧。 - David Gras

Answer 1

WebKit支持滚动条伪元素，可以使用标准CSS规则隐藏它们：

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

如果您想隐藏所有滚动条，请使用

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

关于恢复，我不确定 - 这样确实可以解决问题，但可能有更好的方法：

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

您当然可以始终使用 width: 0，然后再通过 width: auto 轻松恢复，但我不喜欢滥用 width 进行可见性调整。

Firefox 64 现在默认支持实验性的 scrollbar-width 属性（63 需要设置配置标志）。要在 Firefox 64 中隐藏滚动条：

#element {
    scrollbar-width: none;
}

要查看您当前的浏览器是否支持伪元素或 scrollbar-width，请尝试此代码段：

.content {
  /* These rules create an artificially confined space, so we get
     a scrollbar that we can hide. They are not directly involved in
     hiding the scrollbar. */

  border: 1px dashed gray;
  padding: .5em;

  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content {
  /* This is the magic bit for Firefox */
  scrollbar-width: none;
}

.content::-webkit-scrollbar {
  /* This is the magic bit for WebKit */
  display: none;
}

<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue
tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus
vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend
mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus
facilisis a. Vivamus vulputate enim felis, a euismod diam elementum
non. Duis efficitur ac elit non placerat. Integer porta viverra nunc,
sed semper ipsum. Nam laoreet libero lacus.

Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,
eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque
nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed
tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium
volutpat. Duis elementum magna vel velit elementum, ut scelerisque
odio faucibus.
</div>

(需要注意的是，这并不是问题的正确答案，因为它也隐藏了水平线，但当谷歌把我带到这里时，这就是我在寻找的，所以我想我还是会发布它。)

- Peter

---

这正是我在寻找的，因为我真的想隐藏滚动条，但仍然使元素可滚动（例如，上下键）。 - Mathias

其他解决方案无法滚动，所以这应该是最佳答案。 - nuway

除了Webkit，它是否支持其他浏览器？因为它在Mozilla中不起作用。 - Rupam Datta

Mozilla的跟踪器上有一个功能请求。您可以在那里投票支持它，可能会加速其实现速度 :) - Peter

这是正确答案！其他人错过了。问题不仅在于隐藏滚动条，而是溢出如何影响其他样式。我在我们的应用程序中遇到了完全相同的问题。我们不希望在99%的应用程序中使用 overflow auto，但有一个帮助部分，您希望用户能够向下滚动。由于 body 具有 overflow:hidden，唯一处理此问题的方法是在根元素上使用 ng-class 或者感谢这些家伙，只需使用一些 CSS。 - Leon Gaban

Answer 2

是的，有点儿可能

当你询问“浏览器的滚动条是否可以被移除而不是简单地隐藏或伪装”时，每个人都会说“不可能”，因为没有办法以符合标准且跨浏览器兼容的方式从所有浏览器中移除滚动条，还有整个可用性的争论。

然而，如果您不允许网页溢出，就有可能防止浏览器产生并显示滚动条。

这意味着我们必须主动替代浏览器通常为我们执行的相同行为，并告诉浏览器：“谢谢你的帮助，但我们不需要了。”我们可以避免滚动（完全可行），并在我们创建和控制的元素内滚动。

创建一个具有overflow hidden属性的div。检测用户尝试滚动但无法滚动的情况，因为我们已经禁用了overflow: hidden的浏览器滚动功能。当发生这种情况时，使用JavaScript将内容向上移动。从而创建自己的滚动而不是浏览器默认的滚动，或者使用像iScroll这样的插件。

---

为了全面而言，以下是所有操纵滚动条的厂商特定方式：

Internet Explorer 5.5+

*这些属性从未成为CSS规范的一部分，也从未被批准或添加供应商前缀，但它们在Internet Explorer和Konqueror中有效。这些也可以在每个应用程序的用户样式表中本地设置。在Internet Explorer中，您可以在“辅助功能”选项卡下找到，在Konqueror中则在“样式表”选项卡下找到。

body, html { /* These are defaults and can be replaced by hexadecimal color values */
    scrollbar-base-color: aqua;
    scrollbar-face-color: ThreeDFace;
    scrollbar-highlight-color: ThreeDHighlight;
    scrollbar-3dlight-color: ThreeDLightShadow;
    scrollbar-shadow-color: ThreeDDarkShadow;
    scrollbar-darkshadow-color: ThreeDDarkShadow;
    scrollbar-track-color: Scrollbar;
    scrollbar-arrow-color: ButtonText;
}

截至Internet Explorer 8，这些属性由Microsoft添加了供应商前缀，但它们仍未被W3C批准。

-ms-scrollbar-base-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-3dlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-base-color
-ms-scrollbar-track-color

关于Internet Explorer的更多细节

Internet Explorer提供了scroll属性，用于设置是否禁用或启用滚动条；它还可以用于获取滚动条位置的值。

使用Microsoft Internet Explorer 6及更高版本时，当使用!DOCTYPE声明指定符合标准的模式时，该属性适用于HTML元素。当未指定符合标准的模式时，如早期版本的Internet Explorer一样，该属性适用于BODY元素，而不是HTML元素。

值得注意的是，在使用.NET时，Presentation框架中的System.Windows.Controls.Primitives中的ScrollBar类负责渲染滚动条。

http://msdn.microsoft.com/en-us/library/ie/ms534393(v=vs.85).aspx

• MSDN. 基本UI属性
• W3C. 关于非标准滚动条属性
• MSDN. .NET ScrollBar类

---

WebKit

与滚动条定制相关的 WebKit 扩展包括：

::-webkit-scrollbar {}             /* 1 */
::-webkit-scrollbar-button {}      /* 2 */
::-webkit-scrollbar-track {}       /* 3 */
::-webkit-scrollbar-track-piece {} /* 4 */
::-webkit-scrollbar-thumb {}       /* 5 */
::-webkit-scrollbar-corner {}      /* 6 */
::-webkit-resizer {}               /* 7 */

这些伪类可以与其他伪选择器结合使用：

• :horizontal – 伪类水平应用于任何具有水平方向的滚动条部件。
• :vertical – 伪类垂直应用于任何具有垂直方向的滚动条部件。
• :decrement – 减量伪类应用于按钮和跟踪器部件。它指示在使用时（例如，垂直滚动条上的向上按钮，水平滚动条上的向左按钮），按钮或跟踪器部件是否会减少视图的位置。
• :increment – 增量伪类应用于按钮和跟踪器部件。它指示在使用时（例如，垂直滚动条上的向下按钮，水平滚动条上的向右按钮），按钮或跟踪器部件是否会增加视图的位置。
• :start – 开始伪类应用于按钮和跟踪器部件。它指示对象是否放置在滑块之前。
• :end – 结束伪类应用于按钮和跟踪器部件。它指示对象是否放置在滑块之后。
• :double-button – 双按钮伪类应用于按钮和跟踪器部件。它用于检测按钮是否是一对在滚动条同一端的按钮之一。 对于跟踪器部件，它指示轨道部件是否与一对按钮相邻。
• :single-button – 单按钮伪类应用于按钮和跟踪器部件。 它用于检测按钮是否在滚动条末端独自存在。 对于跟踪器部件，它指示轨道部件是否与一个单一按钮相邻。
• :no-button – 应用于跟踪器部件并指示是否在滚动条的边缘完成，即该端没有任何按钮。
• :corner-present – 应用于所有滚动条部件并指示是否存在滚动条角。
• :window-inactive – 应用于所有滚动条部件并指示包含滚动条的窗口当前是否处于活动状态。（在最近的夜间版本中，此伪类现在也适用于 ::selection。我们计划将其扩展为与任何内容一起使用并将其提议为新的标准伪类。）

这些组合的例子

::-webkit-scrollbar-track-piece:start { /* Select the top half (or left half) or scrollbar track individually */ }
::-webkit-scrollbar-thumb:window-inactive { /* Select the thumb when the browser window isn't in focus */ }
::-webkit-scrollbar-button:horizontal:decrement:hover { /* Select the down or left scroll button when it's being hovered by the mouse */ }

• 样式化滚动条 - Webkit.org

关于Chrome的更多细节

addWindowScrollHandler public static HandlerRegistration addWindowScrollHandler(Window.ScrollHandler handler)

  添加一个 Window.ScrollEvent 处理程序 参数:   handler - 处理程序 返回:   返回处理程序注册 [来源](http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/Window.html#addWindowScrollHandler(com.google.gwt.user.client.Window.ScrollHandler) )

---

Mozilla

Mozilla有一些扩展可以操作滚动条，但是它们都不建议使用。

• -moz-scrollbars-none 建议使用overflow:hidden代替。
• -moz-scrollbars-horizontal 类似于overflow-x
• -moz-scrollbars-vertical 类似于overflow-y

• -moz-hidden-unscrollable 仅在用户配置文件设置内部起作用。禁用滚动XML根元素，并禁用使用箭头键和鼠标滚轮滚动网页。

• Mozilla开发者文档关于“Overflow”

关于Mozilla的更多细节

据我所知，这并不是特别有用，但值得注意的是，在Firefox中控制是否显示滚动条的属性为（参考链接）：

• 属性: scrollbars
• 类型: nsIDOMBarProp
• 描述: 控制窗口是否显示滚动条的对象。此属性在 JavaScript 中是“可替换”的。只读

最后但同样重要的是，填充就像魔法一样。

正如之前在其他答案中提到的那样，这里有一个足够自我解释的插图。

---

历史课

我只是出于好奇，想学习滚动条的起源，以下是我找到的最佳参考资料。

• 关于滚动和滚动条的10项发明
• https://tools.ietf.org/id/draft-hellstrom-textpreview-02.txt
• https://tools.ietf.org/id/draft-mrose-blocks-service-01.txt

杂项

在HTML5规范草案中定义了“seamless”属性，防止iFrame中出现滚动条，以便将其与页面上周围的内容融合在一起。不过，这个元素在最新修订版中已经被取消。

< p > scrollbar BarProp对象是 window 对象的子对象，表示包含滚动机制或某些类似界面概念的用户界面元素。如果滚动条可见，则 window.scrollbars.visible 将返回 true 。

interface Window {
  // The current browsing context
  readonly attribute WindowProxy window;
  readonly attribute WindowProxy self;
           attribute DOMString name;
  [PutForwards=href] readonly attribute Location location;
  readonly attribute History history;
  readonly attribute UndoManager undoManager;
  Selection getSelection();
  [Replaceable] readonly attribute BarProp locationbar;
  [Replaceable] readonly attribute BarProp menubar;
  [Replaceable] readonly attribute BarProp personalbar;
  [Replaceable] readonly attribute BarProp scrollbars;
  [Replaceable] readonly attribute BarProp statusbar;
  [Replaceable] readonly attribute BarProp toolbar;
  void close();
  void focus();
  void blur();
  // Truncated

The History API还包括滚动恢复功能，以保持页面加载时的滚动位置。 window.history.scrollRestoration可用于检查scrollrestoration的状态或更改其状态（附加="auto"/"manual"。自动是默认值。将其更改为手动意味着作为开发人员，您将接管可能需要的任何滚动更改当用户遍历应用程序的历史记录时。如果需要，您可以使用history.pushState()记录滚动位置并推送历史记录条目。

---

更多阅读：

• 维基百科上的滚动条
• Windows上的滚动条
• 滚动方法
• 滚动方法 - 微软开发者网络
• iScroll在Github上的页面（参考上面第一部分）
• 关于可用性的文章：滚动和滚动条，作者Jakob Nielsen

示例

• 使用纯CSS实现无body滚动的独立滚动面板 - Ben Frain (10-21-2014)

- davidcondrey

---

这个回答将适用于比当前获得赞同的答案更多的浏览器（即IE）。 - Matt Jensen

很棒的补充。今天我实际上也实现了同样的解决方案！可能值得一提的是，另一个元素应该是overflow: hidden; - Matt Jensen

这是正确的、功能齐全的答案。它解释了如果你只想阻止用户滚动，可以使用overflow规则。你也可以实现自己的自定义滚动特性。如果这还不够，你可以直接设置滚动条属性，使用不同的规则来适配不同的浏览器。 - newshorts

虽然这是一个非常深思熟虑的答案，非常详细，并且链接了许多资源，但是当您禁用滚动并使用JavaScript处理所有滚动时，辅助技术用户存在巨大问题。如果您每次滚动时不为用户设置焦点，则您的AT用户将完全迷失方向。此外，您的用户现在已经失去了对所见内容的精细控制。为用户接管滚动非常糟糕的用户体验。 - ShiningLight

Firefox Quantum 63.0.1 在 MacOS High Sierra 上，即使使用 'overflow: -moz-scrollbars-none' 规则，也无法隐藏滚动条。有人知道解决方法吗？所有其他浏览器似乎都可以使用建议的解决方案。 - Simona Adriani

Answer 3

将 overflow: hidden; 设置在 body 标签上，如下所示：

<style type="text/css">
    body {
        overflow: hidden;
    }
</style>

上面的代码“隐藏”了水平和垂直滚动条。

如果您只想隐藏垂直滚动条，请使用overflow-y：

<style type="text/css">
    body {
        overflow-y: hidden;
    }
</style>

如果您只想隐藏水平滚动条，请使用overflow-x：

<style type="text/css">
    body {
        overflow-x: hidden;
    }
</style>

---

如果需要，内容将被剪切以适应填充框。不提供滚动条，也不支持允许用户滚动（例如通过拖动或使用滚轮）。可以通过编程方式滚动内容（例如，通过设置offsetLeft等属性的值），因此元素仍然是滚动容器。_(source)

- jao

---

实际上，这并不完全是正确答案：overflow:hidden并不是“隐藏”滚动条。它还停止了页面的滚动功能。那不是我们要求的准确内容。 - adriendenat

在Chrome中，当对body overflow属性设置为hidden时，鼠标滚轮可以实现页面滚动。然而在Firefox中，使用鼠标滚轮无法实现页面滚动，我花了一些时间才弄清楚这一点。 - Doug Molineux

提示一下，Firefox、Chrome和其他浏览器的设计师表示，滚动条是一个敏感的问题，它“越过”了页面的边界进入到窗口管理器的领域。从技术角度来讲，网页不应该能够修改用户的窗口小部件，就像你不能要求网页为窗口的标题栏按钮使用不同的图形或拥有不同的对话框颜色等。一些扩展程序可以实现这一点，但这引发了一个相当大的争议。现在可以在 MDN 上查找被视为侵入式操作系统的 -moz 扩展的“弃用”部分。 - osirisgothra

我认为强调 overflow: hidden 禁用滚动没有意义。如果有人想要隐藏滚动条，那么他们可能认为控制滚动是多余的，因为首先没有内容需要滚动。或者可能是因为根本不想允许滚动。 - BoltClock

对我来说，这个论断是完全有效的，因为问题是要“隐藏滚动条”，而不是“禁用滚动”。 - sboisse

Answer 4

以下是我的解决方案，理论上覆盖所有现代浏览器：

html {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

html::-webkit-scrollbar {
    width: 0px; /* For Chrome, Safari, and Opera */
}

html可以替换为您想要隐藏滚动条的任何元素。

_{注意：我已经浏览了其他19个答案，以查看我发布的代码是否已经被提及，似乎没有一个答案总结了2019年的情况，尽管其中很多答案都非常详细。如果有其他人已经说过这些话并且我错过了，请原谅。}

- Wilf

---

此解决方案来自 https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp。 - Jorge Dieguez Perez

根据archive.org的记录，这个回答早于那个网页。当那个网页发布时，并没有包含这个解决方案。因此，我认为W3Schools的解决方案来自于Stack Overflow ;) - Wilf

我希望有一种方法可以允许垂直滚动而不是水平滚动（或反之亦然）。 - lharby

@lharby，有的，只需要使用overflow-x和/或overflow-y即可。 - DJFriar

@DJFriar 这是不同的属性。一个人需要使用 html::-webkit-scrollbar-x html::-webkit-scrollbar-y 等等，但我认为没有这样的东西存在。 overflow 是一个 CSS 属性，滚动条是由浏览器实现的。 - lharby

Answer 5

你可以通过给一个有溢出隐藏的包装 div，并将内部 div 设置为 auto 来实现此目的。

为了移除内部 div 的滚动条，您可以通过将其拉出外部 div 的视口并对内部 div 应用负边距来实现。然后对内部 div 应用相等的填充，以使内容保持在视图中。

JSFiddle

###HTML

<div class="hide-scroll">
    <div class="viewport">
        ...
    </div>
</div>

###CSS

.hide-scroll {
    overflow: hidden;
}

.viewport {
    overflow: auto;

    /* Make sure the inner div is not larger than the container
     * so that we have room to scroll.
     */
    max-height: 100%;

    /* Pick an arbitrary margin/padding that should be bigger
     * than the max scrollbar width across the devices that 
     * you are supporting.
     * padding = -margin
     */
    margin-right: -100px;
    padding-right: 100px;
}

- thgaskell

---

我认为这应该是被接受的答案。我唯一需要补充的是在 .viewport 的 CSS 中加入 height: inherited。 - Post Impatica

这个答案唯一的问题是移动滚动条留下的“空白”空间，因为我们实际上不知道滚动条的宽度，所以无法从填充中减去它。 - Frondor

此句可翻译为："此外，您不需要为填充和边距使用固定值。使用 '100%' 更加灵活且能够完成工作。" - Frondor

在IE11、Opera和Chrome中工作过，但尚未测试Firefox。这是很好的答案，+1。 - almost a beginner

为什么是“-100px”和“100px”？ - oldboy

Answer 6

这对我来说使用简单的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

---

不幸的是，在macOS Sierra上，FireFox 48.0.2中无法正常工作。如果您执行overflow: -moz-scrollbars-none;，则可以成功删除滚动条，但也会删除滚动的能力。您最好将.container设置为overflow: hidden。 - Martyn Chamberlin

哦，从https://developer.mozilla.org/en-US/docs/Web/CSS/overflow中，我们了解到关于“-moz-scrollbars-none”的内容：“这是一个过时的API，不再保证可用。” - Martyn Chamberlin

Answer 7

如果你们还感兴趣的话，我认为我找到了一个解决方法。虽然这是我第一周，但对我管用...

<div class="contentScroller">
    <div class="content">
    </div>
</div>

.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}

- Ben Yo

---

在Chrome和Firefox中可以正常工作，尚未测试IE或其他浏览器。http://jsfiddle.net/8xtfk729/ - Ben Davis

在Chrome（至少v54版本）中，由于某种原因，这会禁用通过滚轮滚动的功能。仍然可以通过箭头键、Home/End/Page Down/Page Up、触摸轻扫和鼠标3次点击并拖动来滚动。 - House3272

这个答案是合法的，它确实有效，并且似乎可以在各种浏览器中使用。 - Sam

这会在我的页面上隐藏整个 div。 - Jonny

Answer 8

如果你想要解决在移动设备上隐藏滚动条的问题，可以按照彼得的答案进行操作！

这里有一个jsfiddle，使用以下方案来隐藏水平滚动条。

.scroll-wrapper{
    overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
}

它已在搭载Android 4.0.4（冰淇淋三明治）的Samsung平板电脑上进行测试，包括原生浏览器和Chrome，以及在搭载iOS 6的iPad上，在Safari和Chrome中都进行了测试。

- Alex

---

他的答案在iOS 12.3的Chrome和Safari上不起作用。 - oldboy

Answer 9

就像其他人所说，使用CSS的overflow属性。

但是如果你仍然希望用户能够滚动内容（而不显示滚动条），你需要使用JavaScript。

请查看我的答案以获取解决方案：隐藏滚动条，同时仍能使用鼠标和键盘滚动

- Peter Örneholm

---

这是正确的答案，应该排在第一位。在此之上的所有内容都没有回答问题。OP并不要求禁用滚动条，而是想要隐藏滚动条。 - pixelpax

Answer 10

使用 CSS 的 overflow 属性:

.noscroll {
  width: 150px;
  height: 150px;
  overflow: auto; /* Or hidden, or visible */
}

以下是更多例子：

• overflow-x, overflow-y 测试
• CSS Overflow 属性

- Sergiy Sokolenko

---

这在iOS的Chrome和Safari上实际上无法工作。 - oldboy