html自动隐藏滚动条,隐藏HTML页面上的滚动条

是的，有点.。

当你问到“浏览器的滚动条是否能以某种方式被移除，而不是简单地隐藏或伪装”时，每个人都会说“不可能”，因为这样做是不可能的。移除所有浏览器的滚动条以兼容和交叉兼容的方式出现，然后是可用性的整个论证。

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

这只是意味着我们必须主动地替换浏览器通常为我们做的相同的行为，并向浏览器表示感谢，但不要谢兄弟。与其尝试删除滚动条(我们都知道这是不可能的)，我们还可以避免滚动(完全可行)，在我们创建的元素中滚动，并对其有更多的控制。

创建一个隐藏溢出的div。检测用户试图滚动但无法滚动的时间，因为我们已经禁用了浏览器滚动溢出的能力：隐藏。而是在发生这种情况时使用Javascript将内容向上移动。因此，在没有浏览器的情况下创建自己的滚动，默认滚动，或者使用插件，如艾克罗

---

为了彻底；所有特定于供应商操作滚动条的方法：

InternetExplorer 5.5+

*这些属性从来都不是CSS规范的一部分，也没有经过批准或供应商的前缀，但它们在InternetExplorer和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开始，这些属性都是由微软(Microsoft)以供应商为前缀的，但仍未得到W3C的批准。-ms-scrollbar-base-color-ms-scrollbar-face-color-ms-scrollbar-highlight-color-ms-scrollbar-3dlight-color-ms-scrollbar-shadow-color-ms-scrol

lbar-darkshadow-color-ms-scrollbar-base-color-ms-scrollbar-track-color

有关InternetExplorer的详细信息

介词scroll可用，它设置是否禁用或启用滚动条；它还可以用于获取滚动条位置的值。

对于MicrosoftInternetExplorer 6及更高版本，当您使用！DOCTYPE声明指定符合标准的模式时，此属性将应用于HTML元素。当未指定符合标准的模式时(与早期版本的IE一样)，此属性将应用于BODY元素，不这个HTML元素。

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

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-bu

tton:horizontal:decrement:hover { /* Select the down or left scroll button when it's being hovered by the mouse */ }

关于Chrome的更多细节

莫兹拉

Mozilla确实有一些用于操作滚动条的扩展，但建议不要使用它们。-moz-scrollbars-none他们建议使用溢出：隐藏代替此。

-moz-scrollbars-horizontal类似于溢出-x

-moz-scrollbars-vertical类似于溢出-y

-moz-hidden-unscrollable仅在用户配置文件设置内工作。禁用滚动XML根元素，并禁用使用箭头键和鼠标轮滚动网页。

关于Mozilla的更多细节

据我所知，这并不真正有用，但值得注意的是，控制Firefox中是否显示滚动条的属性是：(参考链接)属性：滚动条

类型：nsIDOMBarProp

描述：控制窗口中是否显示滚动条的对象。这个属性在JavaScript中是“可替换的”。只读

最后但并非最不重要的是填充就像魔法。

正如以前在其他一些答案中提到的那样，这里有一个很容易解释的例子。

历史课

仅仅是因为我好奇，我想了解滚动条的起源，这是我找到的最好的参考资料。

杂类

这个scrollbar对象是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

历史API还包括页面导航上的滚动恢复功能，以在页面加载时持久化滚动位置。window.history.scrollRestoration可用于检查滚动恢复的状态或更改其状态(追加)="auto"/"manual"..AUTO是默认值。将其更改为手动意味着您作为开发人员将获得用户遍历应用程序历史时可能需要的任何滚动更改的所有权。如果需要，您可以跟踪滚动位置，同时使用History y.ushState()推送历史记录条目。

---

进一步读：

实例