使用 jQuery 插件替换默认滚动条的问题答案

【问题标题】：Issue replacing default scroll bar using jQuery plugin使用 jQuery 插件替换默认滚动条的问题
【发布时间】：2012-04-28 02:01:21
【问题描述】：

我想使用一个名为 TinyScrollbar 的 jQuery 插件替换我网站的默认滚动条（尤其是 THIS 页面）。但是，由于某种原因，我在页面上收到以下错误：

jquery.tinyscrollbar.min.js:1Uncaught TypeError: Cannot read property 'offsetHeight' of undefined

您可以通过检查 Chrome 中的元素来查看此错误。

可能有人知道为什么会发生此错误吗？我用来初始化插件的代码如下：

$('#full-height-template-container').tinyscrollbar();

【问题讨论】：

问题可能在您的fadeIn，尝试使用fadin 的callback 函数然后将tinyscroll 分配给元素，因为元素在:visible 之前没有偏移量
我该怎么做？我想既然我在 fadeIn 之后调用 tinyScroll 就不会有问题了。我应该只做 .fadeIn(function(){ tiny scroll here } );
DOM 加载后没有 document.ready 运行吗？

标签： jquery replace scrollbar

【解决方案1】：

问题是您没有按照应有的方式使用该插件。

错误（在firefox firebug中），使用tinescrollbar的源文件，显示：oViewport.obj[0]是undefined。如果您在源代码中查看几行，您可以看到 oViewport 的属性 obj 定义为：$('.viewport', root)。在这里根是你的容器。显然它没有找到 .viewport 类的 html 元素。您的页面不包含具有此类的 html 元素！

如果您查看 tinyscrollbar 的 website，您可以在“如何”部分看到如何构建正确的 HTML 以使插件正常工作。

jScrollPane 可能是您可以使用的更简单（类似的插件）。不需要像 tiniscrollbar 那样设置 HTML。

【讨论】：

jScrollPane 最好的部分是它也适用于移动浏览器，即使它并不完美，但它比我尝试过的大多数插件都要好。

【解决方案2】：

Tiny Scrollbar 网站没有提到 JS 库中有硬编码的类名。您可以通过扩展库以接受单个所需 html 元素的类名来更改此设置。

【讨论】：