隐藏HTML页面上的滚动条

Question

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

Answer 1

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

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

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

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

我不确定还原 - 这确实有效,但可能有正确的方法:

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

你当然可以随时使用width: 0,这可以轻松恢复width: auto,但我不是滥用width可见性调整的粉丝.

更新:默认情况下,Firefox 64现在支持实验性滚动条宽度属性(63需要设置配置标志).要在FF64中隐藏滚动条:

#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 2

是的,有点......

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

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

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

创建一个隐藏溢出的div.当用户试图滚动,但不能因为我们已经禁用溢出滚动浏览器能力检测:隐藏..而是使用Javascript发生这种情况时移动内容.从而在没有浏览器默认滚动的情况下创建我们自己的滚动或使用像iScroll这样的插件

---

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

Internet Explorer 5.5+

*这些属性从未成为CSS规范的一部分,也未被批准或供应商加前缀,但它们在Internet Explorer和Konqueror中工作.这些也可以在每个应用程序的用户样式表中本地设置.在IE中,您可以在"样式表"选项卡下的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;
}

从IE8开始,这些属性是由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的更多详细信息

IE scroll提供哪些设置是否禁用或启用滚动条; 它还可以用于获取滚动条位置的值.

使用Microsoft Internet Explorer 6及更高版本,当您使用!DOCTYPE声明指定符合标准的模式时,此属性适用于HTML元素.如果没有指定标准兼容模式,与早期版本的IE浏览器,这个属性适用于该!DOCTYPE元素,不是的BODY元素.

值得注意的是,在使用.NET HTML时,Presentation框架中的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 */

这些可以与其他伪选择器组合:

• System.Windows.Controls.Primitives - 水平伪类适用于任何具有水平方向的滚动条.
• :horizontal - 垂直伪类适用于任何具有垂直方向的滚动条.
• :vertical - 减量伪类适用于按钮和轨道片段.它指示按钮或轨道件在使用时是否会减小视图的位置(例如,在垂直滚动条上,在水平滚动条上留下).
• :decrement - 增量伪类适用于按钮和轨道片段.它指示按钮或轨道件在使用时是否会增加视图的位置(例如,向下在垂直滚动条上,在水平滚动条上).
• :increment - start伪类适用于按钮和轨道片段.它指示对象是否放在拇指之前.
• :start - 结束伪类适用于按钮和轨道片段.它指示对象是否放在拇指之后.
• :end - 双按钮伪类适用于按钮和轨道部分.它用于检测按钮是否是滚动条同一端的一对按钮的一部分.对于轨道件,它指示轨道件是否邻接一对按钮.
• :double-button - 单按钮伪类适用于按钮和轨道部分.它用于检测按钮是否单独位于滚动条的末尾.对于轨道件,它指示轨道件是否邻接单个按钮.
• :single-button - 适用于跟踪片段并指示轨道片是否运行到滚动条的边缘,即轨道的那一端没有按钮.
• :no-button - 适用于所有滚动条片段并指示是否存在滚动条角.
• :corner-present - 适用于所有滚动条片段并指示包含滚动条的窗口当前是否处于活动状态.(在最近的夜宵中,这个伪类现在也适用于:: 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 - 处理程序
返回:
  返回处理程序注册
[ source ](http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/Window.html# addWindowScrollHandler(com.google.gwt.user.client.Window.ScrollHandler) )

Mozilla的

Mozilla确实有一些操作滚动条的扩展,但建议不要使用它们.

• :window-inactive 他们建议使用溢出:隐藏代替此.
• -moz-scrollbars-none 与overflow-x类似
• -moz-scrollbars-horizontal 与overflow-y类似

• -moz-scrollbars-vertical仅在用户配置文件设置内部工作.禁用滚动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规范草案中,-moz-hidden-unscrollable定义了属性以防止滚动条出现在iFrame中,以便它们可以与页面上的周围内容混合. 虽然此元素未出现在最新版本中.

所述seamlessBarProp对象是一个子scrollbar对象,并表示包含一个滚动机制,或一些类似的接口概念的用户界面元素. 如果滚动条可见,window将返回window.scrollbars.visible.

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还包括用于页面导航上的滚动恢复的功能,以在页面加载时保持滚动位置. true可用于检查scrollrestoration的状态或更改其状态(附加window.history.scrollRestoration.自动是默认值.将其更改为手动意味着您作为开发人员将获得用户遍历应用程序历史记录时可能需要的任何滚动更改的所有权如果需要,可以在使用history.pushState()推送历史条目时跟踪滚动位置.

---

进一步阅读:

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

例子

• 没有身体滚动的独立滚动面板(仅使用CSS) - Ben Frain(10-21-2014)

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>

更新:我的意思是隐藏,抱歉,刚刚醒来:-)

注意:它还会禁用滚动功能.如果您只想隐藏滚动条而不是滚动功能,请参阅以下答案.

Answer 4

你可以用一个包装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 5

您可以使用CSS属性overflow: -moz-scrollbars-none;并overflow: -moz-scrollbars-none;与之结合使用overflow: -moz-scrollbars-none;.

在IE10 +,Firefox,Safari和Chrome上测试过,效果很好:

.container {
    -ms-overflow-style: none;  // Internet Explorer 10+
    scrollbar-width: none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

当您隐藏滚动条时overflow: -moz-scrollbars-none;,这是一个比其他解决方案更好的解决方案,因为每个浏览器的默认滚动条宽度不同.

注意: 在最新版本的Firefox中,overflow: -moz-scrollbars-none;不推荐使用该属性(链接).

Answer 6

Here's my solution, which theoretically covers all modern browsers:

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 can be replaced with any element you want to hide the scrollbar of.

_{Note: I've skimmed the other 19 answers to see if the code I'm posting has already been covered, and it seems like no single answer sums up the situation as it stands in 2019, although plenty of them go into excellent detail. Apologies if this has been said by someone else and I missed it.}

Answer 7

如果你还有兴趣,我想我找到了你们的工作.这是我的第一周,但它对我有用..

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

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

Answer 8

如果您正在寻找隐藏移动设备滚动条的解决方案,请按照Peter的回答!

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

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

在安卓4.0.4的三星平板电脑(原生浏览器和Chrome浏览器)和iOS 6的iPad(都在Safari和Chrome中)上进行了测试.

Answer 9

使用css overflow属性:

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

以下是一些例子:

• http://www.brunildo.org/test/Overflowxy2.html
• http://css-tricks.com/the-css-overflow-property/

Answer 10

正如其他人已经说过的那样,使用CSS溢出.

但是,如果您仍希望用户能够滚动该内容(不显示滚动条),则必须使用JavaScript.请点击此处获取解决方案:隐藏滚动条,同时仍然可以使用鼠标/键盘滚动

Answer 11

除了彼得的回答:

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

这对IE10也是一样的:

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

Answer 12

交叉浏览器隐藏滚动条的方法.

经过测试的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 13

如果您希望滚动工作,在隐藏滚动条之前,请考虑设置样式.现代版本的OS X和移动操作系统都有滚动条,虽然用鼠标抓取是不切实际的,但它们非常漂亮和中性.

为了隐藏滚动条,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 14

只是想到我会向任何读这个问题的人指出设置溢出:body元素上的hidden(或overflow-y)并没有为我隐藏滚动条.我不得不使用HTML元素.

Answer 15

我的 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 16

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

Copy this CSS code to the customer code for hiding the scroll bar:

<style>

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

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

</style>