如何顺利隐藏滚动条？

Question

我需要平滑地隐藏正文滚动条。我已经尝试 overflow:hidden 进行过渡，但它不起作用。提前致谢

Answer 1

您可以使用下面的代码隐藏滚动条

这将隐藏文本区域的所有滚动条。

 textarea 
{ 
    overflow:hidden;
}

您也可以使用文本区域的 id 或 class 使其成为唯一一个

textarea#txt 
{
overflow:hidden;
}

Answer 2

遗憾的是，没有 'Short and simple' 解决方案可以做到这一点。滚动条本身不是一个元素，因此您最终不得不自己制作它，并在其上或其他元素上添加 hover 或 click 效果。幸运的是，之前有其他 Whosebug 用户已经这样做并与我们分享了这个，以便我们将来可以使用它并从中学习。后者当然是主要原因，因为这是 SO 的主要目的。

See this JSFiddle.

此 fiddle 模仿 Facebook 滚动条的功能，即当您不再将鼠标悬停在滚动条上时淡出。您需要做的就是让它与 click() 事件一起工作，而不是 hover() 事件。

Answer 3

这将根据您的需要平滑地隐藏滚动条

jQuery('html,body').stop().animate({scrollTop:900 },500,function(){});

Answer 4

我知道我有点晚了，但你帮了我，所以我不妨试着帮忙哈哈。

selector ::-webkit-scrollbar 可以修改为opacity为0，如果用jQuery或者JS写的话可以同时应用overflow: hidden。比如添加 ::-webkit-scrollbar { opacity: 0; transition: all .25s;} 每当你想要的时候。

从这篇文章中得到了选择器。 https://css-tricks.com/custom-scrollbars-in-webkit/

如何顺利隐藏滚动条？

How can I hide a scrollbar smoothly?

javascript

css

jquery

scrollbar

css-transitions