隐藏HTML页面上的滚动条

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

Answer 1

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

更新：我的意思是隐藏，对不起，刚醒来:-)

---

注意：它也会禁用滚动function。 如果您只想隐藏滚动条而不滚动function，请参阅下面的答案。

Answer 2

为了完整起见，这适用于webkit：

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

如果你想隐藏所有的滚动条，使用

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

我不知道恢复 – 这确实有效，但是可能有一个正确的方法来做到这一点：

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

你当然可以总是使用width: 0 ，这可以很容易地恢复与width: auto ，但我不是滥用可见性调整width的粉丝。

要查看您当前的浏览器是否支持此function，请尝试以下代码片段：

 .content { /* These rules create an artificially confined space, so we get a scrollbar that we can hide. They are not part of the hiding itself. */ border: 1px dashed gray; padding: .5em; white-space: pre-wrap; height: 5em; overflow-y: scroll; } .content::-webkit-scrollbar { /* This is the magic bit */ 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 3

是的，有点…

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

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

这只是意味着我们必须主动地replace浏览器通常为我们做的同样的行为，并告诉浏览器感谢，但没有感谢的朋友。 我们可以避免滚动（完全可行），并在我们制作的元素中滚动，并且有更多的控制权，而不是试图去除滚动条（我们都知道这是不可能的）。

创build一个隐藏溢出的div。 检测用户尝试滚动但无法访问，因为我们已经禁用浏览器滚动溢出：隐藏的能力，而是在Javascript发生时使用Javascript来移动内容。 从而创build我们自己的滚动浏览器默认滚动或使用像iScroll插件

—

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

Internet Explorer 5.5+

*这些属性从来不是CSS规范的一部分，也没有被批准或供应商的前缀，但他们在Internet Explorer和Konqueror中工作。 这些也可以在每个应用程序的用户样式表中本地设置。 在IE中，您可以在Konqueror的“样式表”标签下的“辅助function”标签下find它。

 body, html { /* these are default, can be replaced by hex 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开始，这些属性是由微软提供的前缀，但仍然未被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一样，这个属性适用于BODY元素，而不是 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 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 */ 

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

• :horizontal – 横向伪类适用于任何具有水平方向的滚动条。
• :vertical – 垂直伪类适用于任何垂直方向的滚动条。
• :decrement – 递减伪类适用于button和曲目片段。 它指示button或轨迹片段在使用时是否将递减视图的位置（例如，在垂直滚动条上，在水平滚动条上左边）。
• :increment – 增量伪类应用于button和轨道片段。 它指示button或曲目片段在使用时是否将增加视图的位置（例如，在垂直滚动条上，在水平滚动条上的右边）。
• :start – 开始伪类适用于button和轨道片断。 它指示对象是否放在拇指之前。
• :end – 结束伪类应用于button和轨迹片段。 它指示对象是否放在拇指之后。
• :double-button – 双button伪类应用于button和轨迹片段。 它用于检测button是否位于滚动条同一端的一对button的一部分。 对于轨道件，它指示轨道件是否邻接一对button。
• :single-button – 单button伪类应用于button和轨迹片段。 它用于检测一个button本身是否在滚动条的末尾。 对于轨道件，它表示轨道件是否邻接单件button。
• :no-button – 适用于跟踪棋子，并指示棋子是否跑到滚动条的边缘，即在棋子的那一端没有button。
• :corner-present – 适用于所有滚动条，并指示滚动条angular是否存在。
• :window-inactive – 适用于所有滚动条，并指示包含滚动条的窗口当前是否处于活动状态。 （在最近的夜晚，这个伪类现在也适用于::select，我们计划扩展它以处理任何内容，并将其作为新的标准伪类提出来。

这些组合的例子

 ::-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处理程序
参数：
处理程序 – 处理程序
返回：
返回处理程序注册
[ 来源 ]（ http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/Window.html#addWindowScrollHandler （ com.google.gwt.user.client.Window.ScrollHandler） ）

---

Mozilla的

Mozilla确实有一些扩展来处理滚动条，但是build议不要使用它们。

• -moz-scrollbars-none他们推荐使用overflow：隐藏在这个位置。
• -moz-scrollbars-horizontal类似于overflow-x
• -moz-scrollbars-vertical与overflow-y类似

• -moz-hidden-unscrollable只能在用户configuration文件设置内部工作。 禁用滚动XML根元素，并禁用箭头键和鼠标滚轮来滚动网页。

• 关于“溢出”的Mozilla开发人员文档

关于Mozilla的更多细节

据我所知，这并不是很有用，但值得注意的是，控制滚动条是否显示在Firefox中的属性是:( 引用链接 ）

• 属性：滚动条
• types： nsIDOMBarProp
• 说明：控制滚动条是否显示在窗口中的对象。 这个属性在JavaScript中是“可replace的”。 只读

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

正如前面在其他一些答案中提到的，这里是一个足够自我解释的例子。

---

历史课

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

• 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中出现滚动条，以便它们可以与页面上的周围内容混合。 虽然这个元素没有出现在最新版本中。

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 

历史loggingAPI还包含页面导航上的滚动恢复function，以在页面加载时保持滚动位置。 window.history.scrollRestoration可以用来检查scrollrestoration的状态或者改变它的状态（appending ="auto"/"manual" ，Auto是默认值，更改为手动意味着你作为开发者将拥有所有权滚动用户遍历应用程序历史logging时可能需要的更改，如果需要，可以使用history.pushState（）推送历史logging条目来跟踪滚动位置。

—

进一步阅读：

• 在维基百科的滚动条
• 滚动条（Windows）
• 滚动方法
• 滚动方法 – 微软开发networking
• 在Github上的iScroll（在上面的第一部分中引用）
• 滚动和滚动条关于可用性的文章Jakob Nielsen

例子

• 独立的滚动面板没有身体滚动（只使用CSS） – 本Frain（10-21-2014）

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和-ms-overflow-style与::-webkit-scrollbar的组合。

testingIE10 +，Firefox，Safari和Chrome，效果很好：

 .container { -ms-overflow-style: none; // IE 10+ overflow: -moz-scrollbars-none; // Firefox } .container::-webkit-scrollbar { display: none; // Safari and Chrome } 

这是一个比其他更好的解决scheme，因为默认的滚动条宽度在每个浏览器上是不同的。

注意：在最新版本的Firefox中， -moz-scrollbars-none属性已被弃用（ 链接 ）。

Answer 6

如果你还有兴趣的话，我想我find了你们的工作。 这是我的第一周，但它为我工作..

 <div class="contentScroller"> <div class="content"> </div> </div> .contentScroller {overflow-y: auto; visibility: hidden;} .content {visibility: visible;} 

Answer 7

如果您正在寻找隐藏移动设备滚动条的解决scheme，请按照Peter的回答 ！

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

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

使用Android 4.0.4的三星平板电脑（本机浏览器和Chrome浏览器）以及iOS 6 iPad（Safari和Chrome浏览器）进行testing。

Answer 8

正如其他人已经说过，使用CSS溢出。

但是，如果你仍然希望用户能够滚动该内容（不滚动条可见），你必须使用JavaScript。 在这里我的答案是一个解决scheme： 隐藏滚动条，同时仍然可以用鼠标/键盘滚动

Answer 9

使用CSS溢出属性 ：

 .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

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

testing边缘，铬，火狐，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 11

只是以为我会指出任何人阅读这个问题，设置溢出：隐藏（或溢出y）身体元素没有隐藏我的滚动条。 我不得不使用HTML元素。

Answer 12

除了彼得的回答：

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

这对于IE10来说是一样的：

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

Answer 13

如果要在滚动条之前滚动，请在隐藏滚动条之前考虑样式。 现代版本的OS X和移动操作系统都有滚动条，虽然用鼠标抓取不切实际，但却非常漂亮和中性。

为了隐藏滚动条， John Kurlak的一项技术运行良好，除了让没有触摸板的Firefox用户无法滚动，除非他们有一个带轮子的鼠标，但他们通常只能垂直滚动。

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

• 屏蔽滚动条的外部元素。
• 一个中间元素有滚动条。
• 内容元素既设置中间元素的大小，并使其具有滚动条。

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

我最关心的是，浏览器的所有版本是否设置滚动条使可见的溢出内容可见。 我已经在当前的浏览器中进行了testing，但不是较老的。

请原谅我的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; } 

testing

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隐藏的滚动条。 方向键在点击后可以工作。 鼠标滚轮和触控板的工作。 OS X.
• Android 4.4.4和4.1.2。 滚动条隐藏。 触摸滚动工程。 试过Chrome 37.0，Firefox 32.0和4.4.4上的HTMLViewer（不pipe是什么）。 在HTMLViewer中，页面是被屏蔽内容的大小，并且可以滚动！ 滚动交互与页面缩放可接受。

Answer 14

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

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

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

查找更多关于： 溢出

Answer 17

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

我相信你可以使用溢出CSS属性来操作它，但是它们的浏览器支持有限。 一位消息人士表示，这是IE5 +，Firefox 1.5+和Safari 3+ – 可能足以满足您的需求。

这个链接有一个很好的讨论： http : //www.search-this.com/2008/03/26/scrolling-scrolling-scrolling/