将滚动条隐藏在 HTML 页面上

可以使用 CSS 隐藏滚动条吗？你会怎么做？

答案

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

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

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

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

我不确定是否要还原 - 确实可以，但是可能有正确的方法：

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

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

Firefox 64 现在默认支持实验性的滚动条宽度属性（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>

（请注意，这并不是对这个问题的正确答案，因为它也隐藏了水平条，但这就是我在 Google 指着我在这里时要查找的内容，因此我认为我还是会发布它。）

是的，有点..

当您问 “是否可以某种方式删除浏览器的滚动条，而不是简单地隐藏或伪装” 时，每个人都会说 “不可能”，因为不可能从所有浏览器中删除滚动条。兼容和交叉兼容的方式，然后就是可用性的全部论点。

但是，如果您不允许网页溢出，则可以防止浏览器需要生成和显示滚动条。

这仅意味着我们必须主动替代浏览器通常会为我们执行的相同行为，并告诉浏览器感谢但不感谢伙伴。与其尝试删除滚动条（众所周知，这是不可能的），我们可以避免滚动（完全可行）并在我们制作并具有更多控制权的元素内滚动。

创建一个隐藏了溢出的 div。检测用户何时尝试滚动，但无法检测，因为我们已经禁用了浏览器的溢出溢出（隐藏）滚动功能，而是在发生这种情况时使用 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可用，该scroll可设置是否禁用或启用滚动条。它也可以用来获取滚动条的位置值。

在 Microsoft Internet Explorer 6 和更高版本中，当您使用!DOCTYPE声明指定符合标准的模式时，此属性将应用于 HTML 元素。如果没有指定标准兼容模式，与早期版本的 Internet Explorer，此属性应用于BODY元素，而不是 HTML元素。

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

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

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 – start 伪类适用于按钮和跟踪片段。它指示对象是否放置在拇指之前。
:end – end 伪类适用于按钮和跟踪片段。它指示对象是否放置在拇指之后。
:double-button – 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公共静态 HandlerRegistration addWindowScrollHandler（Window.ScrollHandler 处理程序）
添加 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与溢出 - y
-moz-hidden-unscrollable仅在用户配置文件设置内部起作用。禁用滚动 XML 根元素，并禁用使用箭头键和鼠标滚轮滚动网页。
Mozilla 开发人员文档 “溢出”

有关 Mozilla 的更多详细信息

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

属性：滚动条
类型： nsIDOMBarProp
说明：控制窗口中是否显示滚动条的对象。此属性在 JavaScript 中是 “可替换的”。只读

最后但并非最不重要的一点是，填充就像魔术一样。

正如前面在其他一些答案中提到的那样，这是一个不言自明的图示。

在此处输入图片说明

历史课

只是因为我很好奇，所以我想了解滚动条的起源，这些是我发现的最佳参考。

杂

在 HTML5 规范草案中，定义了seamless属性以防止滚动条出现在 iFrame 中，以便它们可以与页面上的周围内容混合。尽管此元素未出现在最新版本中。

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

History API 还包括用于页面导航上的滚动恢复的功能，以在页面加载时保持滚动位置。

window.history.scrollRestoration可用于检查滚动恢复的状态或更改其状态（附加="auto"/"manual" 。Auto 是默认值。将其更改为 manual 意味着您作为开发人员将拥有任何所有权用户遍历应用程序的历史记录时可能需要进行滚动更改，如果需要，可以在使用 history.pushState（）推送历史记录条目时跟踪滚动位置。

---

进一步阅读：

例子

没有主体滚动的独立滚动面板（仅使用 CSS）-Ben Frain（10-21-2014）

设置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>

注意：它还将禁用滚动功能。如果您只想隐藏滚动条而不是滚动功能，请参考以下答案。