隐藏HTML页面上的滚动条

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

当前回答

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

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

style="position: fixed;"

到＜body＞元素。

Java脚本：

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

CSS:

body {
  position: fixed;
}

2020-07-28 17:39:05

其他回答

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

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

2010-07-21 06:06:17

使用CSS溢出属性：

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

以下是更多示例：

溢出-x，溢出-y测试CSS溢出属性

2010-07-21 06:12:02

除了彼得的回答：

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

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

我不得不使用html元素。

2012-08-23 20:33:26

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

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