CSS可以用来隐藏滚动条吗？你会怎么做？
当前回答
您可以使用隐藏溢出的包装器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 scrollbar width across the devices that
* you are supporting.
* padding = -margin
*/
margin-right: -100px;
padding-right: 100px;
}
其他回答
除了彼得的回答：
如果您想从iframe中删除滚动条，则需要在iframe网站中添加用于删除滚动条的样式。无法在包含滚动条的iframe中设置元素的样式。
具有iframe的网站：
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<body>
<iframe src="/iframe"></iframe>
</body>
</html>
已命名的网站：
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<style>
html, body {
margin: 0;
padding: 0
}
.content {
scrollbar-width: none;
}
.content::-webkit-scrollbar {
display: none;
}
.content {
height: 100vh;
overflow: scroll;
}
</style>
<body>
<div class="content">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>
这对我来说适用于简单的CSS财产：
.container {
-ms-overflow-style: none; // Internet Explorer 10+
scrollbar-width: none; // Firefox
}
.container::-webkit-scrollbar {
display: none; // Safari and Chrome
}
对于旧版本的Firefox，请使用：overflow:-moz滚动条none；
我相信您可以使用溢出CSS属性来操作它，但他们的浏览器支持有限。一位消息人士表示，它是Internet Explorer 5（及更高版本）、Firefox 1.5（及更新版本）和Safari 3（及更晚版本）——也许足以满足您的需求。
滚动，滚动，滚动有很好的讨论。
WebKit支持可以使用标准CSS规则隐藏的滚动条伪元素：
#element::-webkit-scrollbar {
display: none;
}
如果要隐藏所有滚动条，请使用
::-webkit-scrollbar {
display: none;
}
我不确定是否要恢复-这确实有效，但可能有一种正确的方法：
::-webkit-scrollbar {
display: block;
}
当然，您可以始终使用width:0，然后可以使用width:auto轻松恢复，但我不喜欢滥用width来调整可见性。
Firefox 64现在默认支持实验性的滚动条宽度属性（63需要设置配置标志）。要在Firefox 64中隐藏滚动条：
#element {
scrollbar-width: none;
}
要查看当前浏览器是否支持伪元素或滚动条宽度，请尝试以下代码段：
.内容{/*这些规则创造了一个人工封闭的空间我们可以隐藏的滚动条。他们不直接参与隐藏滚动条*/边框：1px灰色虚线；衬垫：.5cm；空白：预换行；高度：5米；overflow-y：滚动；}.内容{/*这是Firefox的神奇之处*/滚动条宽度：无；}.content:：-webkit滚动条{/*这是WebKit的神奇之处*/显示：无；}<div class='content'>Lorem ipsum dolor坐amet，consectetur adipiscing elit。Mauris欧盟urna和leo aliquet malesuada ut ac dolor。融合非弧形舌费门特姆索达莱斯是一位智者。安静地坐在委内瑞拉埃格斯塔斯。整数vite tempor enim。在达皮布斯尼塞尔坐amet purus conguetincidunt。Morbi tincidunt ut eros in rutrum。Sed quam erat，福西布斯水平tempor et，元素在tortor。弧形立面的实际自由度莫莉-乌特-智人。苏西庇特厄洛斯，欧盟泰勒斯facilisis a.Vivamus vulputate enim felis，一种直径为euismod的元素不。Duis efficiuit ac elit non-placerat。整数porta-viverra nunc，sed semper ipsum。越南自由贸易区。坐在猫的旁边。Sed impredite，nunc ut portal elementum，厄洛斯·米·埃格斯塔斯·尼布，法利西斯·鲁特鲁姆·萨皮恩·多尔·居斯托。Quisque公司nec magna erat公司。交通工具相（Phasellus vehicula porttitor nulla et dictum）。轿车tincidunt scelersque finibus。麦地那斯（Maecenas consequat massa aliquam pretium）volutpat。Duis elementum magna vel velit elementum，ut scelerisque奥迪奥·福西布斯。</div>
（请注意，这并不是这个问题的正确答案，因为它也隐藏了水平条，但当谷歌将我指向这里时，我正在寻找这一点，所以我想无论如何我都会发布它。）
是的，有点。。
当你问“浏览器的滚动条是否可以以某种方式删除，而不是简单地隐藏或伪装”时，每个人都会说“不可能”，因为不可能以兼容和交叉兼容的方式从所有浏览器中删除滚动条，这就是可用性的全部论点。
然而，如果您不允许网页溢出，则可以防止浏览器需要生成和显示滚动条。
这意味着我们必须主动地替代浏览器通常会为我们做的相同行为，并告诉浏览器谢谢但不谢谢，伙计。我们可以避免滚动（完全可行），而不是试图删除滚动条（我们都知道这是不可能的），而是在我们制作的元素内滚动，并对其进行更多控制。
创建隐藏溢出的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日）
