在HTML页面上隐藏滚动条
CSS可以用来隐藏滚动条吗？ 你会如何做到这一点？
设置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>
更新：我的意思是隐藏，对不起，刚醒来:-)
注意：它也会禁用滚动功能。 如果您只想隐藏滚动条但不滚动功能，请参阅下面的答案。
为了完整起见，这适用于webkit：
#element::-webkit-scrollbar {
display: none;
}
如果您想隐藏所有滚动条，请使用
::-webkit-scrollbar {
display: none;
}
我不确定恢复 - 这确实奏效，但可能有一个正确的方法来做到这一点：
::-webkit-scrollbar {
display: block;
}
你当然可以使用width: 0 ，这可以很容易地恢复width: auto ，但我不是滥用可见性调整width的粉丝。
要查看您当前的浏览器是否支持此操作，请尝试以下代码片段：
.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>是的，有点...
当你问这个问题时，“浏览器的滚动条可以以某种方式删除，而不是简单地隐藏或伪装”，每个人都会说“不可能”，因为无法从一个浏览器中删除滚动条兼容和交叉兼容的方式，然后就是可用性的全部论点。
但是，如果您不允许网页溢出，则可以防止浏览器生成并显示滚动条。
这仅仅意味着我们必须主动替换浏览器通常为我们做的同样的行为，并告诉浏览器感谢，但没有感谢好友。 我们可以避免滚动（完全可行），并在我们制作的元素中滚动，并且有更多的控制权，而不是尝试去除滚动条（我们都知道这是不可能的）。
创建一个隐藏溢出的div。 当用户尝试滚动时检测，但无法执行，因为我们禁止了浏览器使用overflow：hidden ..滚动的功能，而是在发生这种情况时使用Javascript移动内容。 从而创建我们自己的滚动而无需浏览器默认滚动或使用像iScroll这样的插件
---
为了彻底; 所有供应商特定的操作滚动条的方式：
Internet Explorer 5.5+
*这些属性从来都不是CSS规范的一部分，它们也没有被批准或供应商提供前缀，但它们可以在Internet Explorer和Konqueror中使用。 这些也可以在每个应用程序的用户样式表中本地设置。 在IE中，您可以在Konqueror的“样式表”选项卡下的“辅助功能”选项卡下找到它。
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
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 - 开始伪类适用于按钮和曲目片段。 它指示对象是否放在拇指之前。 :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 */ }
有关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确实有一些扩展来处理滚动条，但是建议不要使用它们。
-moz-scrollbars-none他们推荐使用overflow：隐藏在这个位置。 -moz-scrollbars-horizontal与overflow-x类似 -moz-scrollbars-vertical与overflow-y类似 -moz-hidden-unscrollable只能在用户配置文件设置内部工作。 禁用滚动XML根元素并禁用箭头键和鼠标滚轮来滚动网页。
关于'溢出'的Mozilla开发人员文档
关于Mozilla的更多细节
据我所知，这并不是很有用，但值得注意的是，控制滚动条是否显示在Firefox中的属性是：（引用链接）
最后但并非最不重要的是，填充就像魔术一样。
正如前面在其他一些答案中提到的，这里有一个足以自我解释的例证。
历史课
仅仅因为我很好奇，我想了解滚动条的起源，这些是我发现的最佳参考。
杂
在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
History API还包含页面导航中的滚动恢复功能，以在页面加载时保持滚动位置。 window.history.scrollRestoration可以用来检查scrollrestoration的状态或者改变它的状态（appending ="auto"/"manual" ，Auto是默认值，将它改为手动意味着你作为开发者将拥有所有权滚动用户遍历应用程序历史记录时可能需要的更改，如果需要，可以使用history.pushState（）推送历史记录条目时跟踪滚动位置。