CSS可以用来隐藏滚动条吗？你会怎么做？
当前回答
我编写了一个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
其他回答
如果您希望滚动工作，在隐藏滚动条之前，请考虑设置样式他们现代版本的OS X和移动操作系统具有滚动条，而不适合用鼠标抓取，非常漂亮和中性。
为了隐藏滚动条，约翰·库尔拉克（John Kurlak）的一项技术很好，除了离开没有触摸板无法滚动的Firefox用户，除非他们有一只带轮子的老鼠，他们可能会这样做，但即使这样，他们通常也可以仅垂直滚动。
John的技术使用三个元素：
屏蔽滚动条的外部元素。具有滚动条的中间元素。以及一个内容元素，既可以设置中间元素的大小它有滚动条。
必须可以将外部元素和内容元素的大小设置为相同这消除了使用百分比，但我想不出其他什么用正确的调整是行不通的。
我最担心的是是否所有版本的浏览器都设置了滚动条可见溢出内容可见。我已经在当前浏览器中进行了测试，但是而不是更老的。
请原谅我的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。铬37.0隐藏滚动条。单击以聚焦后，箭头键起作用。鼠标滚轮和轨迹板工作。OS X和Windows。Internet Explorer 11隐藏滚动条。单击以聚焦后，箭头键起作用。鼠标滚轮作品窗户。Safari 5.1.10隐藏滚动条。单击以聚焦后，箭头键起作用。鼠标滚轮和轨迹板工作。操作系统X。Android 4.4.4和4.1.2。隐藏滚动条。触摸滚动工作。在Chrome 37.0、Firefox中试用32.0和4.4.4上的HTMLViewer（无论是什么）。在HTMLViewer中，页面是屏蔽内容的大小，也可以滚动！滚动与页面缩放进行可接受的交互。
要禁用垂直滚动条，只需添加overflow-y:hidden；。
了解更多信息：溢出。
如果您正在寻找隐藏移动设备滚动条的解决方案，请遵循Peter的答案！
这里有一个jsfiddle，它使用下面的解决方案隐藏水平滚动条。
.scroll-wrapper{
overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar {
display: none;
}
它在搭载Android 4.0.4的三星平板电脑（冰淇淋三明治，在本机浏览器和Chrome浏览器中）和搭载iOS 6的iPad（在Safari和Chrome浏览器）上进行了测试。
隐藏滚动条的跨浏览器方法。
它在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;
}
是的，有点。。
当你问“浏览器的滚动条是否可以以某种方式删除，而不是简单地隐藏或伪装”时，每个人都会说“不可能”，因为不可能以兼容和交叉兼容的方式从所有浏览器中删除滚动条，这就是可用性的全部论点。
然而，如果您不允许网页溢出，则可以防止浏览器需要生成和显示滚动条。
这意味着我们必须主动地替代浏览器通常会为我们做的相同行为，并告诉浏览器谢谢但不谢谢，伙计。我们可以避免滚动（完全可行），而不是试图删除滚动条（我们都知道这是不可能的），而是在我们制作的元素内滚动，并对其进行更多控制。
创建隐藏溢出的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;
}
从InternetExplorer8开始，这些财产的前缀都是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允许滚动，设置是否禁用或启用滚动条；它也可以用来获得滚动条位置的值。
使用！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。基本UI财产W3C中。关于非标准滚动条财产MSDN。NET ScrollBar类
网络工具包
与滚动条定制相关的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–垂直伪类适用于任何具有垂直方向的滚动条。：减量–减量伪类应用于按钮和曲目。它指示按钮或轨迹条在使用时是否会减小视图的位置（例如，在垂直滚动条上向上，在水平滚动条上向左）。：increment–递增伪类应用于按钮和轨迹片段。它指示按钮或轨迹条在使用时是否会增加视图的位置（例如，在垂直滚动条上向下，在水平滚动条上向右）。：start–start伪类应用于按钮和曲目。它指示对象是否放置在拇指之前。：end–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（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滚动条none他们建议使用overflow：hidden来代替它。-moz滚动条水平类似于overflow-x-moz滚动条垂直类似于overflow-y-moz隐藏不可折叠仅在用户配置文件设置内部工作。禁用滚动XML根元素，并禁用使用箭头键和鼠标滚轮滚动网页。Mozilla开发者文档“溢出”
有关Mozilla的更多详细信息
据我所知，这并不是很有用，但值得注意的是，控制Firefox中是否显示滚动条的属性是（参考链接）：
属性：滚动条类型：nsIDOMBarProp描述：控制窗口中是否显示滚动条的对象。该属性在JavaScript中是“可替换的”。只读
最后但并非最不重要的是，填充就像魔法一样。
正如前面在一些其他答案中提到的，这里有一个充分不言自明的说明。
历史课
正因为我很好奇，我想了解滚动条的起源，这些是我找到的最好的参考。
10关于滚动条和滚动条的发明https://tools.ietf.org/id/draft-hellstrom-textpreview-02.txthttps://tools.ietf.org/id/draft-mrose-blocks-service-01.txt
混杂的
在HTML5规范草案中，无缝属性被定义为防止滚动条出现在iFrame中，以便它们可以与页面上的周围内容混合。尽管此元素未出现在最新版本中。
滚动条BarProp对象是窗口对象的子对象，表示包含滚动机制或类似界面概念的用户界面元素。如果滚动条可见，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
历史API还包括页面导航上的滚动恢复功能，以在页面加载时保持滚动位置。
window.history.srollRestore可用于检查滚动恢复的状态或更改其状态（appending=“auto”/“manual”.Auto是默认值。将其更改为手动意味着您作为开发人员将拥有用户浏览应用程序历史记录时可能需要的任何滚动更改的所有权。如果需要，可以在使用history.pushState（）推送历史条目时跟踪滚动位置。
---
进一步阅读：
维基百科上的滚动条滚动条（Windows）滚动方法滚动方法-Microsoft开发人员网络Github上的iScroll（见上文第一节）Jakob Nielsen的一篇关于可用性的文章
示例
无正文滚动的独立滚动面板（仅使用CSS）-Ben Frain（2014年10月21日）
