隐藏 HTML 页面上的滚动条

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

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

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

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

我不确定恢复 - 这确实有效，但可能有正确的方法来做到这一点：

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

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

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

#element {
    scrollbar-width: none;
}

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

.content { /* 这些规则创建了一个人为的封闭空间，所以我们得到了一个可以隐藏的滚动条。它们不直接参与隐藏滚动条。 */ 边框：1px 灰色虚线；填充：0.5em；空白：预包装；高度：5em；溢出-y：滚动； } .content { /* 这是 Firefox 的神奇之处 */ scrollbar-width: none; } .content::-webkit-scrollbar { /* 这是 WebKit 的神奇之处 */ display: none; }

（请注意，这并不是问题的正确答案，因为它也隐藏了水平条，但这就是当谷歌指向我时我正在寻找的东西，所以我想我还是会发布它。）

---

是的，有点..

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

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

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

创建一个隐藏溢出的 div。检测用户何时尝试滚动，但无法滚动，因为我们已经禁用了浏览器通过溢出：隐藏.. 滚动的功能，而是在发生这种情况时使用 JavaScript 将内容向上移动。从而在没有浏览器默认滚动或使用 iScroll 之类的插件的情况下创建我们自己的滚动。

---

为了彻底；所有供应商特定的操作滚动条的方法：

互联网浏览器 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 元素，NOT 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 滚动条类

网络套件

与滚动条定制相关的 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 */

https://i.stack.imgur.com/BhMto.jpg

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

:horizontal – 水平伪类适用于任何具有水平方向的滚动条。

:vertical - 垂直伪类适用于任何具有垂直方向的滚动条。

:decrement – 递减伪类适用于按钮和轨道片段。它指示按钮或轨道片在使用时是否会减小视图的位置（例如，在垂直滚动条上，在水平滚动条上左）。

:increment – 增量伪类适用于按钮和轨道片段。它指示按钮或轨道块在使用时是否会增加视图的位置（例如，在垂直滚动条上向下，在水平滚动条上向右）。

:start – start 伪类适用于按钮和轨道片段。它指示对象是否放在拇指之前。

:end – end 伪类适用于按钮和轨道片段。它指示对象是否放在拇指之后。

:double-button – 双按钮伪类适用于按钮和轨道片段。它用于检测按钮是否是位于滚动条同一端的一对按钮的一部分。对于轨道件，它指示轨道件是否邻接一对按钮。

:single-button – 单按钮伪类适用于按钮和轨道片段。它用于检测按钮本身是否位于滚动条的末尾。对于轨道块，它指示轨道块是否邻接单个按钮。

:no-button – 应用于轨迹片段，指示轨迹片段是否运行到滚动条的边缘，即轨迹的那一端没有按钮。

:corner-present – 适用于所有滚动条片段并指示是否存在滚动条角。

:window-inactive – 适用于所有滚动条片段，并指示包含滚动条的窗口当前是否处于活动状态。 （在最近的 nightlies 中，这个伪类现在也适用于 ::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 参数：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 开发人员文档

有关 Mozilla 的更多详细信息

据我所知，这并不是真正有用，但值得注意的是，控制是否在 Firefox 中显示滚动条的属性是 (reference link)：

属性：滚动条

类型：nsIDOMBarProp

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

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

正如之前在其他一些答案中提到的，这里有一个足够不言自明的插图。

https://i.stack.imgur.com/fafgt.gif

历史课

https://i.stack.imgur.com/C1Wd0.jpg

只是因为好奇，想了解一下滚动条的由来，这些是我找到的最好的参考资料。

关于滚动和滚动条的 10 项发明

https://tools.ietf.org/id/draft-hellstrom-textpreview-02.txt

https://tools.ietf.org/id/draft-mrose-blocks-service-01.txt

各种各样的

In an HTML5 specification draft, the seamless attribute was defined to prevent scroll-bars from appearing in iFrames so that they could be blended with surrounding content on a page。虽然这个元素没有出现在最新版本中。

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 是默认值。将其更改为手动意味着您作为开发人员将拥有在以下情况下可能需要的任何滚动更改的所有权）用户遍历应用程序的历史记录。如果需要，您可以在使用 history.pushState() 推送历史记录条目时跟踪滚动位置。

---

进一步阅读：

维基百科上的滚动条

滚动条 (Windows)

滚动方法

滚动方法 - Microsoft Dev Network

Github 上的 iScroll（在上面的第一节中引用）

滚动和滚动条 Jakob Nielsen 的一篇关于可用性的文章

例子

没有正文滚动的独立滚动面板（仅使用 CSS）- Ben Frain (10-21-2014)

---

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

<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 等属性的值），因此该元素仍然是滚动容器。 （资源）

---

这是我的解决方案，理论上涵盖了所有现代浏览器：

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 年的情况，尽管其中很多都非常详细。抱歉，如果其他人说过，我错过了。

---

您可以使用隐藏溢出的包装器 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;
}

---

这适用于我的简单 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;

---

如果您仍然感兴趣，我想我为你们找到了解决方法。这是我的第一周，但它对我有用......

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

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

---

如果您正在寻找隐藏移动设备滚动条的解决方案，请关注 Peter's answer！

这是一个 jsfiddle，它使用下面的解决方案来隐藏水平滚动条。

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

它在装有 Android 4.0.4（冰淇淋三明治，在本机浏览器和 Chrome 中）的三星平板电脑和装有 iOS 6（在 Safari 和 Chrome 中）的 iPad 上进行了测试。

---

正如其他人已经说过的，使用 CSS overflow。

但是，如果您仍然希望用户能够滚动该内容（滚动条不可见），您必须使用 JavaScript。

在这里查看我的答案以获得解决方案：Hide scrollbar while still being able to scroll with mouse/keyboard

---

使用 the CSS overflow property：

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

以下是更多示例：

溢出-x，溢出-y 测试

CSS 溢出属性

---

除了彼得的回答：

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

这对于 Internet Explorer 10 也是一样的：

 #element {
      -ms-overflow-style: none;
 }

---

跨浏览器隐藏滚动条的方法。

它在 Edge、Chrome、Firefox 和 Safari 上进行了测试

隐藏滚动条，同时仍然可以使用鼠标滚轮滚动！

Codepen

/* Make parent invisible */
#parent {
    visibility: hidden;
    overflow: scroll;
}

/* Safari and Chrome specific style. Don't need to make parent invisible, because we can style WebKit scrollbars */
#parent:not(*:root) {
  visibility: visible;
}

/* Make Safari and Chrome scrollbar invisible */
#parent::-webkit-scrollbar {
  visibility: hidden;
}

/* Make the child visible */
#child {
    visibility: visible;
}

---

如果您想滚动工作，在隐藏滚动条之前，请考虑对其进行样式设置。现代版本的 OS X 和移动操作系统具有滚动条，虽然用鼠标抓取不切实际，但非常漂亮和中性。

为了隐藏滚动条，a technique by John Kurlak 效果很好，除了让没有触摸板的 Firefox 用户无法滚动，除非他们有带滚轮的鼠标，他们可能会这样做，但即便如此，他们通常也只能垂直滚动。

约翰的技术使用三个要素：

用于屏蔽滚动条的外部元素。

具有滚动条的中间元素。

还有一个内容元素来设置中间元素的大小并使其具有滚动条。

必须可以将外部元素和内容元素的大小设置为相同，从而消除使用百分比，但我想不出任何其他不适用于正确调整的东西。

我最大的担忧是是否所有版本的浏览器都设置滚动条以使可见的溢出内容可见。我已经在当前浏览器中进行了测试，但没有在较旧的浏览器中进行测试。

请原谅我的 SASS ;P

%size {
    // set width and height
}

.outer {
    // mask scrollbars of child
    overflow: hidden;
    // set mask size
    @extend %size;
    // has absolutely positioned child
    position: relative;
}

.middle {
    // always have scrollbars.
    // don't use auto, it leaves vertical scrollbar showing
    overflow: scroll;
    // without absolute, the vertical scrollbar shows
    position: absolute;
}
// prevent text selection from revealing scrollbar, which it only does on
// some webkit based browsers.
.middle::-webkit-scrollbar {
    display: none;
}

.content {
    // push scrollbars behind mask
    @extend %size;
}

测试

OS X 是 10.6.8。 Windows 是 Windows 7。

隐藏 Firefox 32.0 滚动条。即使在单击聚焦后，箭头键也不会滚动，但鼠标滚轮和触控板上的两个手指会滚动。 OS X 和 Windows。

Chrome 37.0 滚动条隐藏。单击聚焦后箭头键起作用。鼠标滚轮和触控板工作。 OS X 和 Windows。

Internet Explorer 11 滚动条隐藏。单击聚焦后箭头键起作用。鼠标滚轮有效。视窗。

Safari 5.1.10 滚动条隐藏。单击聚焦后箭头键起作用。鼠标滚轮和触控板工作。操作系统

安卓 4.4.4 和 4.1.2。滚动条隐藏。触摸滚动工作。在 Chrome 37.0、Firefox 32.0 和 4.4.4 上的 HTMLViewer 中尝试过（不管是什么）。在 HTMLViewer 中，页面是被屏蔽内容的大小，也可以滚动！滚动与页面缩放的交互是可以接受的。

---

我只是想向其他阅读此问题的人指出，在 body 元素上设置 overflow: hidden（或溢出-y）并没有为我隐藏滚动条。

我必须使用 html 元素。

---

将此 CSS 代码复制到用于隐藏滚动条的客户代码中：

<style>

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

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

</style>

---

我的 HTML 是这样的：

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

将此添加到您要隐藏滚动条的 div：

.content {
  position: absolute;
  right: -100px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 75%; /* This can be any value of your choice */
}

并将其添加到容器中

.container {
  overflow-x: hidden;
  max-height: 100%;
  max-width: 100%;
}

---

我编写了一个带有一些选项的 WebKit 版本，例如自动隐藏、小版本、仅滚动 -y 或仅 -x：

._scrollable{
    @size: 15px;
    @little_version_ratio: 2;
    @scrollbar-bg-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color-hover: rgba(0,0,0,0.3);
    @scrollbar-coner-color: rgba(0,0,0,0);

    overflow-y: scroll;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100%;

    &::-webkit-scrollbar {
        background: none;
        width: @size;
        height: @size;
    }

    &::-webkit-scrollbar-track {
        background-color:@scrollbar-bg-color;
        border-radius: @size;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: @size;
        background-color:@scrollbar-handler-color;
        &:hover{
            background-color:@scrollbar-handler-color-hover;
        }
    }

    &::-webkit-scrollbar-corner {
      background-color: @scrollbar-coner-color;
    }

    &.little{
        &::-webkit-scrollbar {
            background: none;
            width: @size / @little_version_ratio;
            height: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-track {
            border-radius: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: @size / @little_version_ratio;
        }
    }

    &.autoHideScrollbar{
        overflow-x: hidden;
        overflow-y: hidden;
        &:hover{
            overflow-y: scroll;
            overflow-x: scroll;
            -webkit-overflow-scrolling: touch;
            &.only-y{
                overflow-y: scroll !important;
                overflow-x: hidden !important;
            }

            &.only-x{
                overflow-x: scroll !important;
                overflow-y: hidden !important;
            }
        }
    }

    &.only-y:not(.autoHideScrollbar){
        overflow-y: scroll !important;
        overflow-x: hidden !important;
    }

    &.only-x:not(.autoHideScrollbar){
        overflow-x: scroll !important;
        overflow-y: hidden !important;
    }
}

http://codepen.io/hicTech/pen/KmKrjb

---

要禁用垂直滚动条，只需添加 overflow-y:hidden;。

了解更多信息：overflow。

---

即使在 overflow:hidden; 时，我的答案也会滚动，使用 jQuery：

例如，使用鼠标滚轮水平滚动：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script type="text/javascript">
    $(function() {

       $("YourSelector").mousewheel(function(event, delta) {

          this.scrollLeft -= (delta * 30);
          event.preventDefault();
       });
    });
</script>

---

我相信您可以使用 overflow CSS 属性对其进行操作，但它们对浏览器的支持有限。一位消息人士称，它是 Internet Explorer 5（及更高版本）、Firefox 1.5（及更高版本）和 Safari 3（及更高版本） - 可能足以满足您的目的。

Scrolling, Scrolling, Scrolling 进行了很好的讨论。

---

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

如果您希望从浏览器视口中删除垂直（和水平）滚动条，请添加：

style="position: fixed;"

到 <body> 元素。

Javascript：

document.body.style.position = 'fixed';

CSS：

body {
  position: fixed;
}

---

除了彼得的回答：

如果您想从 iframe 中删除滚动条，则需要添加样式以在 iframe 的网站中删除滚动条。无法在 iframe 中设置包括滚动条在内的元素样式。

具有 iframe 的网站：

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <title>Page Title</title>
  <body>
   <iframe src="/iframe"></iframe>
  </body>
</html> 

iframe 的网站：

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <title>Page Title</title>

  <style>
  html, body {
    margin: 0;
    padding: 0
  }
  .content {
    scrollbar-width: none;
  }

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

  .content {
    height: 100vh;
    overflow: scroll;
  }
  </style>

  <body>
    <div class="content">
      <h1>This is a Heading</h1>
      <p>This is a paragraph.</p>
      <p>This is another paragraph.</p>
      <h1>This is a Heading</h1>
      <p>This is a paragraph.</p>
      <p>This is another paragraph.</p>
      <h1>This is a Heading</h1>
      <p>This is a paragraph.</p>
      <p>This is another paragraph.</p>
      <h1>This is a Heading</h1>
      <p>This is a paragraph.</p>
      <p>This is another paragraph.</p>
      <h1>This is a Heading</h1>
      <p>This is a paragraph.</p>
      <p>This is another paragraph.</p>
      <h1>This is a Heading</h1>
      <p>This is a paragraph.</p>
      <p>This is another paragraph.</p>
    </div>
  </body>
</html> 

---