自定义滚动条

时间:2011-08-24 14:39:05

标签: javascript css scrollbar jscrollpane

我希望在我的网站中加入自定义滚动条,因为有设置高度的div会溢出。我已经设法在css中使用webkit样式获得了我想要的内容但是我知道在Firefox或IE中查看该站点时会出现问题。

结果,我试图将jScrollPane库合并到我的网站中,但它导致了各种各样的js“冲突”,这使得整个网站陷入混乱!

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

或者 - 有什么方法可以在浏览器是firefox的时候附加一些东西给css?

由于 JD

5 个答案:

答案 0 :(得分:1)

快进到2017年,现在有很多好的自定义滚动条脚本。好吧我的意思是依赖于原生滚动机制并且也适用于移动设备。我使用的是Perfect Scrollbar。在这篇博文中,其他一些好的可以是found here

答案 1 :(得分:0)

我对你究竟要求的东西感到有些困惑,但是如果你正在寻找可以用CSS定制的某种滚动条,那么jQuery UI's Slider就是最好的。

你必须添加一些事件处理程序来进行滚动,但总的来说不应该太难。

答案 2 :(得分:0)

以下是一些您可以使用的自定义滚动条: http://www.net-kit.com/jquery-custom-scrollbar-plugins/

这些解决方案之一应该有效。顺便说一句,我使用JScrollpane,它对我来说就像一个魅力

答案 3 :(得分:0)

我完成了上述所有建议,并对以下任何一个问题感到失望:

  1. 糟糕的跨浏览器兼容性
  2. 滞后
  3. 许多冗余代码/依赖项(jQuery UI)
  4. 因此,我使用了一些CSS技巧和JavaScript(依赖于jQuery选择器)来构建我自己的自定义滚动条实现。该演示版位于https://dev.anuary.com/680a3c94-9651-550f-abca-e853613eb9ce/。源代码托管在https://github.com/anuary/jquery-custom-scrollbar

    我的方法依赖于本机浏览器滚动条。但是,此实现不支持水平滚动条。

答案 4 :(得分:0)

如果有人对此感兴趣,请在没有jQuery的情况下找到这个:

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