CSS可以用来隐藏滚动条吗？你会怎么做？
当前回答
如果您希望滚动工作，在隐藏滚动条之前，请考虑设置样式他们现代版本的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中，页面是屏蔽内容的大小，也可以滚动！滚动与页面缩放进行可接受的交互。
其他回答
除了彼得的回答：
如果您想从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属性来操作它，但他们的浏览器支持有限。一位消息人士表示，它是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，并将内部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;
}
我编写了一个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
