CSS可以用来隐藏滚动条吗？你会怎么做？
我相信您可以使用溢出CSS属性来操作它，但他们的浏览器支持有限。一位消息人士表示，它是Internet Explorer 5（及更高版本）、Firefox 1.5（及更新版本）和Safari 3（及更晚版本）——也许足以满足您的需求。
滚动，滚动，滚动有很好的讨论。
设置溢出：隐藏；在body标签上，如下所示：
<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>
如果需要，内容将被剪裁以适合填充框。不提供滚动条，也不允许用户滚动（例如通过拖动或使用滚轮）。内容可以通过编程方式滚动（例如，通过设置属性值，如offsetLeft），因此元素仍然是滚动容器。（来源）
使用CSS溢出属性：
.noscroll {
width: 150px;
height: 150px;
overflow: auto; /* Or hidden, or visible */
}
以下是更多示例：
溢出-x，溢出-y测试CSS溢出属性
正如其他人已经说过的，使用CSS溢出。
但如果您仍然希望用户能够滚动该内容（滚动条不可见），则必须使用JavaScript。
在这里回答我的问题：隐藏滚动条，同时仍然可以使用鼠标/键盘滚动
我只是想告诉其他读到这个问题的人，在body元素上设置overflow：hidden（或overflow-y）并没有为我隐藏滚动条。
我不得不使用html元素。
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>
（请注意，这并不是这个问题的正确答案，因为它也隐藏了水平条，但当谷歌将我指向这里时，我正在寻找这一点，所以我想无论如何我都会发布它。）
如果您正在寻找隐藏移动设备滚动条的解决方案，请遵循Peter的答案！
这里有一个jsfiddle，它使用下面的解决方案隐藏水平滚动条。
.scroll-wrapper{
overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar {
display: none;
}
它在搭载Android 4.0.4的三星平板电脑（冰淇淋三明治，在本机浏览器和Chrome浏览器中）和搭载iOS 6的iPad（在Safari和Chrome浏览器）上进行了测试。
除了彼得的回答：
#element::-webkit-scrollbar {
display: none;
}
这对Internet Explorer 10的作用相同：
#element {
-ms-overflow-style: none;
}
如果你们还感兴趣的话，我想我为你们找到了一个变通办法。这是我的第一个星期，但这对我很有用。。。
<div class="contentScroller">
<div class="content">
</div>
</div>
.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}
您可以使用隐藏溢出的包装器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;
}
是的，有点。。
当你问“浏览器的滚动条是否可以以某种方式删除，而不是简单地隐藏或伪装”时，每个人都会说“不可能”，因为不可能以兼容和交叉兼容的方式从所有浏览器中删除滚动条，这就是可用性的全部论点。
然而，如果您不允许网页溢出，则可以防止浏览器需要生成和显示滚动条。
这意味着我们必须主动地替代浏览器通常会为我们做的相同行为，并告诉浏览器谢谢但不谢谢，伙计。我们可以避免滚动（完全可行），而不是试图删除滚动条（我们都知道这是不可能的），而是在我们制作的元素内滚动，并对其进行更多控制。
创建隐藏溢出的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日）
如果您希望滚动工作，在隐藏滚动条之前，请考虑设置样式他们现代版本的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中，页面是屏蔽内容的大小，也可以滚动！滚动与页面缩放进行可接受的交互。
即使溢出，我的答案也会滚动：隐藏；，使用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>
我的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%;
}
隐藏滚动条的跨浏览器方法。
它在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;
}
这对我来说适用于简单的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；
我编写了一个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
将此CSS代码复制到隐藏滚动条的客户代码：
<style>
::-webkit-scrollbar {
display: none;
}
#element::-webkit-scrollbar {
display: none;
}
</style>
这是我的解决方案，理论上涵盖了所有现代浏览器：
html {
scrollbar-width: none; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
}
html::-webkit-scrollbar {
width: 0px; /* For Chrome, Safari, and Opera */
}
html可以替换为任何想要隐藏滚动条的元素。
注意：我已经浏览了其他19个答案，看看我发布的代码是否已经被覆盖，似乎没有一个答案能概括2019年的情况，尽管其中很多都非常详细。如果这是别人说的，而我错过了，我深表歉意。
CSS可以用来隐藏滚动条吗？你会怎么做？
如果要从浏览器视口中删除垂直（和水平）滚动条，请添加：
style="position: fixed;"
到＜body＞元素。
Java脚本：
document.body.style.position = 'fixed';
CSS:
body {
position: fixed;
}
除了彼得的回答：
如果您想从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>
