jquery 如何使用JavaScript隐藏滚动条

hjzp0vay  于 2023-08-04  发布在  jQuery
关注(0)|答案(8)|浏览(158)

如何隐藏滚动条?我想这样做是因为滚动条不好。
overflow:hidden没有用,因为我的div元素有很多其他元素。
所以设置overflow并没有解决我的问题。

mv1qrgav

mv1qrgav1#

你可以用这个隐藏滚动条。。

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

字符串
...并使用以下命令取消隐藏:

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


然而,你必须问自己这是否真的是你想要的。滚动条的出现是为了让人们能够查看他们小屏幕之外的东西。

1szpjjfi

1szpjjfi2#

您必须覆盖CSS设置,如下所示:

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

字符串
在div中,你应该添加id标签。

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

4dbbbstv

4dbbbstv3#

我不认为实际上有一种方法可以正确地隐藏滚动条。overflow:hiddenoverflow-x:hiddenoverflow-y:hidden实际上是“如果它超出100 vw/100 vh/100 vw和100 vh,则不显示它”。溢出只是不显示当前(初始tbh)视图之外的内容。
它隐藏了滚动条,因为HTML中的所有内容在查看页面时都不会出现在页面上(没有滚动条,所以没有滚动条)。
唯一可用的隐藏是(此处用于隐藏Y轴滚动条):

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

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

字符串
这是一个真实的隐藏的滚动条,可悲的是,只适用于基于webkit的浏览器。
如果有一天所有的供应商都接受这一点,那么这将是惊人的,我们将最终能够隐藏滚动条。

a9wyjsp7

a9wyjsp74#

您可以在任何元素上使用以下命令:

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

字符串
Source
这只适用于webkit浏览器,所以没有IE和Firefox。

gg0vcinb

gg0vcinb5#

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

overflow: hidden;

字符串
或者是

someElement.style.overflow = 'hidden';

ua4mk5z4

ua4mk5z46#

最好的方法是使用某种伪元素css选择器。但我认为只有webkit(Chrome/Safari)has one for the scrollbar,所以它不是很跨浏览器。
一个简单的替代方法是将它 Package 在一个隐藏滚动条的div中,方法是将width设置为比包含的div小滚动条的大小
DEMO(可能需要一段时间才能使css完美,但你已经掌握了要点)
这里的问题是,滚动条的大小因浏览器而异,因此您必须使滚动条宽度较小的最大外部div。为了在滚动条较小的浏览器中不切断任何内容,最好为滚动条添加最大大小差异的填充。

rkkpypqq

rkkpypqq7#

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);
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;
}
<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>
pdtvr36n

pdtvr36n8#

在相关的div上使用这个:

  • yourDiv*::-webkit-scrollbar{ display:无; }

相关问题