隐藏HTML页面上的滚动条

Question

CSS可以用来隐藏滚动条吗？你会怎么做？

Answer 1

WebKit支持可以使用标准CSS规则隐藏的滚动条伪元素：

#element::-webkit-scrollbar { 
    display: none; 
}

如果您想隐藏所有滚动条，请使用

::-webkit-scrollbar { 
    display: none; 
}

我不确定恢复 - 这确实有效，但可能有正确的方法：

::-webkit-scrollbar { 
    display: block; 
}

您当然可以始终使用width: 0，这可以通过width: auto轻松恢复，但我不喜欢滥用width进行可见性调整。

更新：Firefox 64现在默认支持实验scrollbar-width property（63需要设置配置标志）。要在FF64中隐藏滚动条：

#element {
    scrollbar-width: none;
}

要查看您当前的浏览器是否支持伪元素或scrollbar-width，请尝试以下代码段：

.content {
  /* These rules create an artificially confined space, so we get 
     a scrollbar that we can hide. They are not directly involved in 
     hiding the scrollbar. */

  border: 1px dashed gray;
  padding: .5em;
  
  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content {
  /* This is the magic bit for Firefox */
  scrollbar-width: none;
}

.content::-webkit-scrollbar { 
  /* This is the magic bit for WebKit */
  display: none;
}

<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue
tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus
vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend
mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus
facilisis a. Vivamus vulputate enim felis, a euismod diam elementum
non. Duis efficitur ac elit non placerat. Integer porta viverra nunc,
sed semper ipsum. Nam laoreet libero lacus.

Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,
eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque
nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed
tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium
volutpat. Duis elementum magna vel velit elementum, ut scelerisque
odio faucibus.
</div>

---

（请注意，这不是问题的正确答案，因为它也隐藏了水平条，但这就是我在谷歌指向我时所寻找的，所以我想我还是会发布它。）

Answer 2

在body标签上设置overflow: hidden;，如下所示：

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

更新：我的意思是隐藏，抱歉，刚刚醒来： - ）

---

注意：它还会禁用滚动功能。如果您只想隐藏滚动条而不是滚动功能，请参阅以下答案。

Answer 3

你可以使用一个隐藏溢出的包装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 width of all the scroll bars across
     * the devices you are targeting.
     * padding = -margin
     */
    margin-right: -100px;
    padding-right: 100px;
}

Answer 4

这适用于简单的CSS属性：

diesel = { version = "0.7.0", features = ["postgres", "chrono"] }

更新：为Firefox添加了新的.container { -ms-overflow-style: none; // IE 10+ scrollbar-width: none; // Firefox } .container::-webkit-scrollbar { display: none; // Safari and Chrome } 属性。

对于旧版本的Firefox，请使用：scrollbar-width

Answer 5

如果你还有兴趣，我想我找到了你们的工作。这是我的第一周，但它对我有用..

<div class="contentScroller">
<div class="content">
</div>
</div>

.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}

Answer 6

如果您正在寻找隐藏移动设备滚动条的解决方案，请关注Peter's answer！

这是一个jsfiddle，它使用下面的解决方案来隐藏水平滚动条。

.scroll-wrapper{
    overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
}

在安装了Android 4.0.4的三星平板电脑（原生浏览器和Chrome浏览器）以及iOS 6的iPad（Safari和Chrome浏览器）上进行了测试。

Answer 7

使用 css overflow property ：

.noscroll {
  width:150px;
  height:150px;
  overflow: auto; /* or hidden, or visible */
}

以下是一些例子：

• http://www.brunildo.org/test/Overflowxy2.html
• http://css-tricks.com/the-css-overflow-property/

Answer 8

正如其他人已经说过的那样，使用CSS溢出。

但是如果您仍然希望用户能够滚动该内容（没有滚动条可见），您必须使用JavaScript。 请在此处找到解决方案的答案：hide scrollbar while still able to scroll with mouse/keyboard

Answer 9

跨浏览器隐藏滚动条的方法。

经过测试的Edge，Chrome，Firefox，Safari

隐藏滚动条，同时仍然可以使用鼠标滚轮滚动！ codepen

/* 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;
}

Answer 10

除了彼得的回答：

 #element::-webkit-scrollbar { 
     display: none; 
 }

这对IE10来说也是一样的：

 #element {
      -ms-overflow-style: none;
 }

Answer 11

如果您希望滚动工作，请在隐藏滚动条之前考虑样式 他们。现代版本的OS X和移动操作系统都有滚动条，而 用鼠标抓取是不切实际的，非常漂亮和中立。

要隐藏滚动条，a technique by 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。
• Chrome 37.0 隐藏的滚动条。单击焦点后箭头键工作。鼠标滚轮 和触控板工作。 OS X和Windows。
• Internet Explorer 11 隐藏的滚动条。单击焦点后箭头键工作。鼠标滚轮 作品。视窗。
• Safari 5.1.10 隐藏的滚动条。单击焦点后箭头键工作。鼠标滚轮 和触控板工作。 OS X。
• Android 4.4.4和4.1.2。 隐藏的滚动条。触摸滚动工作。在Chrome 37.0，Firefox中尝试过 32.0和4.4.4上的HTMLViewer（不管是什么）。在HTMLViewer中，页面 是蒙版内容的大小，也可以滚动！滚动 通过页面缩放进行可接受的交互。

Answer 12

我只是想我会向其他人读到这个问题，在body元素上设置溢出：hidden（或overflow-y）并没有为我隐藏滚动条。我不得不使用HTML元素。

Answer 13

我写了一个webkit版本，其中包含自动隐藏，小版本，滚动仅-y 或 only-x等选项

RadioButtons

http://codepen.io/hicTech/pen/KmKrjb

Answer 14

我的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%;
}

Answer 15

即使使用jquery

overflow:hidden;，我的答案也会滚动

例如使用鼠标滚轮水平滚动：

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

Answer 16

要停用垂直滚动条，只需添加：overflow-y:hidden;

详细了解：overflow

Answer 17

将此CSS代码复制到客户代码以隐藏滚动条

  <style>

  ::-webkit-scrollbar { 
     display: none; 
  }

  #element::-webkit-scrollbar { 
     display: none; 
  }

  </style>

Answer 18

我已经浏览了其他19个答案，以查看我发布的代码是否已被涵盖，似乎没有一个答案可以概括出2019年的情况，尽管其中有很多细节非常详尽。抱歉，如果有人说了这个，我错过了。

这是我的解决方案，理论上涵盖了所有现代浏览器：

html {
    scrollbar-width: none; /*For Firefox*/
    -ms-overflow-style: none; /*For IE and Edge*/
}

html::-webkit-scrollbar {
    width: 0px; /*For Chrome, Safari and Opera*/
}

html可以替换为要隐藏其滚动条的任何元素。

Answer 19

我相信你可以使用溢出的CSS属性来操纵它，但它们的浏览器支持有限。有消息称其为IE5 +，Firefox 1.5+和Safari 3+ - 可能足以满足您的需求。

此链接有一个很好的讨论：http://www.search-this.com/2008/03/26/scrolling-scrolling-scrolling/

Answer 20

是否可以使用CSS隐藏滚动条？你会怎么做？

如果要从浏览器视口中删除垂直（和水平）滚动条，请添加：

style="position: fixed;"

转到<body>元素。

---

Javascript：

document.body.style.position = 'fixed';

---

CSS：

body {
  position: fixed;
}