自定义滚动条

Custom scrollbar

本文关键字：滚动条 自定义      更新时间：2023-09-26

我希望在我的网站中加入自定义滚动条，因为有设置高度的div会溢出。我已经成功地得到了我想要的使用webkit样式在css，但我知道，会有问题，当看到在Firefox或IE网站。

因此，我试图将jScrollPane库合并到我的网站中，但它导致了各种各样的js"冲突"，这使整个网站陷入混乱!

是否有任何更简单的方法来自定义我的滚动条，以便我有跨浏览器兼容性，而无需添加新的js页面到网站?

或者-有一种方法，我可以附加一些东西到css当浏览器是firefox!?

谢谢JD

快进到2017年，现在有很多不错的自定义滚动条脚本。我所说的"好"是指那些依赖于原生滚动机制并适用于移动设备的游戏。我用的是完美滚动条。

我对你到底想要什么有点困惑，但如果你正在寻找某种可以用CSS自定义的滚动条，那就看看jQuery UI的Slider吧。

您必须添加一些事件处理程序来执行滚动，但总体来说应该不会太难。

这里有一些你可以使用的自定义滚动条:http://www.net-kit.com/jquery-custom-scrollbar-plugins/

这些解决方案中应该有一个可行。顺便说一句，我使用JScrollpane，它对我来说就像一个魅力

我把上面所有的建议都看了一遍，但对以下任何一个问题都感到失望:

  1. 跨浏览器兼容性差
  3. 大量冗余代码/依赖(jQuery UI)
因此，我使用了一些CSS技巧和JavaScript(取决于jQuery选择器)来构建我自己的自定义滚动条实现。该演示可在https://dev.anuary.com/680a3c94-9651-550f-abca-e853613eb9ce/上获得。源代码寄存于https://github.com/anuary/jquery-custom-scrollbar。

我的方法依赖于本地浏览器滚动条。但是，这个实现不支持水平滚动条。

刚刚发现这个，没有jQuery，如果有人感兴趣:

http://www.script-tutorials.com/custom-scrollbars-cross-browser-solution/

相关文章：