logo标签列表

隐藏HTML页面上的滚动条

cssbrowserscrollbar
836

CSS可以用来隐藏滚动条吗？如何实现这个效果？

5
@UweKeim，IE11没有任何技巧。 - David Gras
22个回答
0
除了Peter的回答之外：
如果您想从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>
0
CSS可以用来隐藏滚动条吗？你会怎么做？
如果您希望从浏览器视口中删除垂直（和水平）滚动条，请添加：
style="position: fixed;"

添加到<body>元素中。

Javascript：

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

CSS：

body {
  position: fixed;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接