如何使用CSS制作自定义滚动条

Question

只是想知道是否可以用css（不是主窗口）更改滚动条的样式

我在div中有一些文本向下滚动，滚动条太大了，让整个网站变得丑陋，

任何想法？

感谢

Answer 1

请参阅已接受的答案以获得良好的技术解决方案。

但是......真的，不要这样做：自定义滚动条和UI元素通常是一个非常糟糕的主意：它会覆盖用户的风格，并可能对页面可访问性造成严重问题。如果您的网站看起来很丑，那么您需要重新设计，以集成到浏览器中。

让您的网站在浏览器中看起来不错，不要让浏览器在您的网站上看起来不错！

Answer 2

某些版本的Internet Explorer允许您使用CSS设置滚动条的样式，但这不是CSS标准的一部分，可能不是现在的方法。

对于跨浏览器兼容性，您需要使用JavaScript模拟滚动条;幸运的是，有一些库可以做到这一点，比如JQuery插件jScrollPane。

Answer 3

我知道它没什么帮助，但是从可用性的角度来看，使用浏览器主滚动条以外的滚动条通常是不受欢迎的。用户发现它通常要么难以掌握（你的普通访问者实际上是愚蠢的，总是记住这一点），或者只是部分页面滚动和部分没有时烦恼。 有时内页只会在鼠标实际悬停时滚动，有时当你到达内页的末尾时，页面的其余部分会开始滚动它，而我只是在抓住内部烦人的特征表面滚动条现在。

如果有任何方式显示整个文本和/或将滚动条留在浏览器的主滚动条上，请执行以下操作：）

Answer 4

如果你想 - 编辑 - 滚动条的视觉特性......这不能用CSS来完成。据我所知，JavaScript可以做到。

如果您只想停止显示滚动条，可以设置

div {
    overflow: hidden;
}

强制滚动条不显示。但您将失去对内容的访问权限。