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

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>

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

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>

（请注意，这并不是对这个问题的正确答案，因为它也隐藏了水平条，但是那是我在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提供了用于设置是否禁用或启用滚动条的功能；它也可以用来获取滚动条的位置值。

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

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

http://msdn.microsoft.com/zh-CN/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– 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 公共静态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中是“可替换的”。只读

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

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

历史课

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

• 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中，以便它们可以与页面上的周围内容混合。尽管此元素未出现在最新版本中。

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

---

进一步阅读：

• 维基百科上的滚动条
• 滚动条（Windows）
• 滚动方法
• 滚动方法-Microsoft Dev Network
• iScroll on Github（在上面的第一部分中引用）
• 滚动和滚动条Jakob Nielsen撰写的有关可用性的文章

例子

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

您可以使用一个包装程序来实现此目的，该程序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;
}

这对我有用简单的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;

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

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 class="contentScroller">
    <div class="content">
    </div>
</div>

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

如果您正在寻找隐藏移动设备滚动条的解决方案，请遵循Peter的回答！

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

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

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

使用CSS overflow属性：

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

这里还有更多示例：

• 溢出x，溢出y测试
• CSS溢出属性

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

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

请在这里找到解决方案的我的答案：隐藏滚动条，同时仍然可以使用鼠标/键盘滚动

除了彼得的答案：

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

对于Internet Explorer 10，这将相同：

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

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

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

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

码笔

/* 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和移动OS的现代版本具有滚动条，这些滚动条虽然不便于用鼠标抓取，但却非常美观和中立。

隐藏滚动条，这是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滚动条已隐藏。单击焦点后，箭头键起作用。鼠标滚轮和触控板工作。OSX。
• Android 4.4.4和4.1.2。滚动条已隐藏。触摸滚动有效。在4.4.4（无论是哪种版本）上的Chrome 37.0，Firefox 32.0和HTMLViewer中进行了尝试。在HTMLViewer中，页面是被屏蔽内容的大小，也可以滚动！滚动与页面缩放可以交互地进行交互。

我只是以为我会指出其他人要阅读的这个问题，即overflow: hidden在body元素不会为我隐藏滚动条。

我必须使用html元素。

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

将此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%;
}

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

查找更多信息：溢出。

即使在以下情况下，我的答案也会滚动 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>

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

滚动，滚动，滚动有很好的讨论。

我尝试了所有方法，最有效的解决方案是始终显示垂直滚动条，然后添加一些负边距将其隐藏。

body {
  overflow-y: scroll;
  margin-right: -20px;
}