隐藏HTML页面上的滚动条

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

当前回答

即使溢出，我的答案也会滚动：隐藏；，使用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>

2014-10-31 11:03:12

其他回答

我相信您可以使用溢出CSS属性来操作它，但他们的浏览器支持有限。一位消息人士表示，它是Internet Explorer 5（及更高版本）、Firefox 1.5（及更新版本）和Safari 3（及更晚版本）——也许足以满足您的需求。

滚动，滚动，滚动有很好的讨论。

2010-07-21 06:06:17

您可以使用隐藏溢出的包装器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;
}

2014-05-20 22:37:45

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

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年的情况，尽管其中很多都非常详细。如果这是别人说的，而我错过了，我深表歉意。

2019-03-04 13:34:30

我只是想告诉其他读到这个问题的人，在body元素上设置overflow：hidden（或overflow-y）并没有为我隐藏滚动条。

我不得不使用html元素。

2012-08-23 20:33:26

除了彼得的回答：

如果您想从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>

2022-01-14 13:37:41

隐藏HTML页面上的滚动条

推荐文章

最新文章

标签