隐藏HTML页面上的滚动条

Question

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

Answer 1

除了彼得的回答：

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

对于Internet Explorer 10，这将是相同的：

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

Answer 2

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

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

Answer 3

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

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

Answer 4

如果您希望滚动工作，在隐藏滚动条之前，请考虑设置样式。现代版本的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 Scrollbars隐藏。即使单击聚焦后箭头键也不会滚动，但鼠标滚轮和两个手指在触控板上都可以滚动。 OS X和Windows。
• Chrome 37.0隐藏的滚动条。单击焦点后箭头键工作。鼠标滚轮和触控板工作。 OS X和Windows。
• Internet Explorer 11隐藏的滚动条。单击焦点后箭头键工作。鼠标滚轮工作。视窗。
• Safari 5.1.10隐藏的滚动条。单击焦点后箭头键工作。鼠标滚轮和触控板工作。 OS X.
• Android 4.4.4和4.1.2。隐藏的滚动条。触摸滚动工作。尝试使用4.5.4中的Chrome 37.0，Firefox 32.0和HTMLViewer（不管是什么）。在HTMLViewer中，页面是蒙版内容的大小，也可以滚动！滚动与页面缩放相互作用可接受。

Answer 5

我只是想我会向任何读这个问题的人指出，在overflow: hidden元素上设置body（或overflow-y）并没有为我隐藏滚动条。

我不得不使用html元素。

Answer 6

我写了一个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

Answer 7

我的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%;
}

Answer 8

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

了解更多信息：overflow。

Answer 9

即使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>

Answer 10

将此CSS代码复制到客户代码以隐藏滚动条：

<style>

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

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

</style>

Answer 11

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 {
  /* 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>

---

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

Answer 12

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

Scrolling, Scrolling, Scrolling有一个很好的讨论。

Answer 13

是的，有点......

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

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

这只是意味着我们必须主动替换浏览器通常会为我们做的相同行为并告诉浏览器感谢，但不要感谢好友。我们可以避免滚动（完全可行），并在我们制作的元素中滚动并对其进行更多控制，而不是尝试删除滚动条（我们都知道这是不可能的）。

创建一个隐藏溢出的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

Further details about 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. Basic UI properties
• W3C. About non-standard scrollbar properties
• MSDN. .NET ScrollBar Class

---

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 - 结束伪类适用于按钮和轨道部分。它指示对象是否放在拇指之后。
• :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 */ }

• Styling Scrollbars - Webkit.org

Further details about Chrome

addWindowScrollHandler public static HandlerRegistration addWindowScrollHandler（Window.ScrollHandler handler）

添加Window.ScrollEvent处理程序参数：handler - 处理程序返回：返回处理程序注册[source]（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他们建议使用溢出：隐藏代替此。
• -moz-scrollbars-horizontal与overflow-x相似
• -moz-scrollbars-vertical与overflow-y类似
• -moz-hidden-unscrollable仅在用户配置文件设置内部工作。禁用滚动XML根元素并禁用箭头键和鼠标滚轮滚动网页。
• Mozilla Developer Docs on 'Overflow'

Further details about Mozilla

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

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

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

如前面在一些其他答案中提到的，这里是一个充分不言自明的说明。

---

历史课

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

• 10 Inventions on Scrolling and Scrollbars
• 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可用于检查scrollrestoration的状态或更改其状态（附加="auto"/"manual"。自动是默认值。将其更改为手动意味着您作为开发人员将获得用户遍历时可能需要的任何滚动更改的所有权应用程序的历史记录。如果需要，可以在使用history.pushState（）推送历史记录条目时跟踪滚动位置。

---

Further reading:

• Scrollbar on Wikipedia
• Scroll bar (Windows)
• The Scroll Method
• The Scroll Method - Microsoft Dev Network
• iScroll on Github (referenced in the first section above)
• Scrolling and Scrollbars an article about usability by Jakob Nielsen

例子

• Independent scrolling panels with no body scroll (using just CSS) - Ben Frain (10-21-2014)

Answer 14

你可以用一个隐藏溢出的包装器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 width of all the scroll bars across
     * the devices you are targeting.
     * padding = -margin
     */
    margin-right: -100px;
    padding-right: 100px;
}

Answer 15

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

Answer 16

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

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

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

Answer 17

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

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

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

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

Answer 18

使用 the CSS overflow property ：

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

以下是一些例子：

• overflow-x, overflow-y tests
• The CSS Overflow Property

Answer 19

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

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

我的答案在这里寻求解决方案：Hide scrollbar while still being able to scroll with mouse/keyboard