Question

如何隐藏滚动条？我想这样做是因为滚动条不好。

overflow:hidden没用，因为我的div元素还有很多其他元素。

因此设置overflow并不能解决我的问题。

Answer 1

您可以使用此隐藏滚动条...

document.body.style.overflow = 'hidden';

......并用它取消隐藏：

document.body.style.overflow = 'visible';

然而，你必须质疑自己这是否真的是你想要的。人们可以看到滚动条，以便能够查看小屏幕之外的内容。

Answer 2

您必须按如下方式覆盖CSS设置：

<style type="text/css">
    #YourSpecialDiv { overflow: hidden !important; }
</style>

你应该添加id标签，即。

<div id="YourSpecialDiv"...>...</div>

Answer 3

我认为实际上没有办法正确隐藏滚动条。 overflow:hidden，overflow-x:hidden和overflow-y:hidden所做的实际上是'如果超出100vw / 100vh / 100vw 100vh则不显示'。溢出只是不显示当前（初始tbh）视图之外的内容。

它隐藏了滚动条，因为HTML中应该在外面的所有内容在查看时都不会出现在页面上（不需要滚动，所以没有滚动条）。

唯一可用的隐藏（此处隐藏Y轴滚动条）：

[container]{
    overflow:scroll;
    overflow-x:hidden;
}

[container]::-webkit-scrollbar{
    width:0;
    background-color:transparent;
}

这是一个真正的滚动条隐藏，但遗憾的是只适用于基于webkit的浏览器。

如果有一天所有供应商都接受了这一点，那就太棒了，我们终于可以隐藏滚动条了。

Answer 4

您可以在任何元素上使用以下内容：

::-webkit-scrollbar {
    width: 0px;
}

Source

这仅适用于webkit浏览器，因此没有IE和Firefox。

Answer 5

您必须使用CSS属性overflow，它“管理”当某个元素的内容超出其边界时应该发生的事情。将其设置为hidden会隐藏滚动条。

overflow: hidden;

或

someElement.style.overflow = 'hidden';

Answer 6

执行此操作的最佳方法是使用某种伪元素css选择器。但我认为只有webkit（Chrome / Safari）has one for the scrollbar，所以它不是非常跨浏览器。

一个hacky替代方法是将它包装在一个隐藏滚动条的div中，通过滚动条的大小将width设置为小于包含的div

DEMO（可能需要一段时间才能让css完美，但你得到了要点）

这里的问题是每个浏览器的滚动条大小不同，因此您必须使外部div成为滚动条宽度较小的最大值。并且为了不使用较小的滚动条切断浏览器中的任何内容，最好为滚动条添加最大尺寸差异的填充。

Answer 7

＆＃13;

var container = document.querySelectorAll("div.container")[0];
container.addEventListener("wheel", function(event) {
  /*Mouse wheel scrolled down*/
  if (event.deltaY > 0)
    container.scrollTop += 30;

  /*Mouse wheel scrolled up*/
  else
    container.scrollTop -= 30;
}, false);

＆＃13;

div.container {
  height: 15rem;
  width: 20rem;
  overflow: hidden;
  padding: 1rem;
  border: 1px solid;
  font-family: "Seoge UI", "Calibri", sans-serif;
  font-size: 1.25rem;
  line-height: 1.5rem;
}

＆＃13;

<div class="container">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus odio, scelerisque vel sollicitudin sed, ullamcorper sed dolor. Vivamus sed egestas nisl. Ut sollicitudin finibus tortor sit amet posuere. Cras erat massa, auctor non urna quis, interdum sollicitudin sapien. Pellentesque gravida ullamcorper est. Maecenas accumsan lobortis mauris, et auctor urna mattis et. Fusce venenatis, magna blandit faucibus sodales, tortor nunc lacinia ligula, bibendum euismod leo felis placerat velit. Fusce sed arcu vitae metus ultricies tincidunt auctor a diam. Duis at augue efficitur eros rutrum iaculis. Praesent eu maximus orci. Praesent lobortis semper elit vitae convallis. Donec consequat lectus tortor, vel aliquam diam fringilla ut. Sed ac tempus justo. Ut bibendum euismod magna, id egestas lacus pulvinar ut. Sed sit amet felis ornare, gravida leo ac, semper dui.</span>  Pellentesque efficitur eget nisl tincidunt gravida. Aenean sed nisl commodo, porta lectus in, tincidunt dui. Vivamus eget nunc ipsum. Praesent sed quam odio. Proin aliquam dapibus dictum. Maecenas tristique lorem id erat venenatis, a varius nibh accumsan.
  Nulla tempor sagittis odio, nec ultricies sem posuere ornare. Vestibulum sit amet consequat neque. Cras iaculis eleifend nisi. Sed erat mauris, fringilla nec congue quis, lobortis in justo. Quisque sit amet metus id ligula mattis elementum. Morbi sodales,
  dui eget fringilla pretium, sem tellus posuere dolor, id pharetra neque elit ac nisl.<br /> Quisque <br />nibh<br />enim,<br />mattis<br />a<br />aliquam<br />eget,<br />luctus<br />id<br />velit.<br />Pellentesque<br />sodales<br />eros<br />eget<br
  />diam<br />gravida<br />porta.<br />Maecenas<br />leo<br />tortor,<br />malesuada<br />quis<br />euismod<br />sed,<br />dictum<br />ut<br />nulla.<br />Vestibulum<br />in<br />massa<br />a<br />quam<br />vehicula<br />placerat<br />in<br />quis<br
  />libero.<br />Maecenas<br />convallis<br />bibendum<br />faucibus.<br />In<br />porttitor<br />quis<br />justo<br />non<br />tincidunt.<br />Pellentesque<br />at<br />justo<br />tincidunt,<br />auctor<br />tortor<br />at,<br />tempus<br />eros. <br
  />Generated: 5 paragraphs, 414 words and 2814 bytes of Lorem Ipsum
</div>

＆＃13;

Answer 8

当我读到你的问题时，我的眼睛受伤了。但是，如果不设置“overflow：hidden”（？！），则无法隐藏浏览器滚动条。这是默认的浏览器行为。

由于你的div有许多其他元素，为什么不为它设置合适的宽度和高度？否则请将其设置为可滚动，以便用户可以完全阅读您的内容。

如何使用JavaScript隐藏滚动条

8 个答案: