帮助一个 jQuery 可滚动插件答案

【问题标题】：Help with a jQuery scrollable plugin帮助一个 jQuery 可滚动插件
【发布时间】：2011-02-21 22:52:56
【问题描述】：

我遇到了一个有趣的代码示例，它允许我使用 jQuery (UI) 使 DIV 元素可滚动，可以在这里找到：http://www.simonbattersby.com/demos/vertical_scrollbar_demo.htm

我随后将它变成了一个插件，以使其更易于使用和更可重用。它工作了 99%，但有一个小错误 - 出于某种原因，当我单击滚动条时，它不会滚动 DIV 元素。

如果我使用鼠标滚轮，它可以正常工作，但由于某种原因，单击和拖动不起作用。

我正在处理的代码在这里：http://jsfiddle.net/mitchmalone/XRnxL/2/

【问题讨论】：

标签： jquery jquery-ui scroll slider scrollable

【解决方案1】：

试试这个。

slide: function (event, ui) {
    var topValue = -((100 - ui.value) * difference / 100);
    $(this).parents(".slider-wrap").prev(".scroll-pane").find('.scroll-content').css({
        top: topValue
    });
},
change: function (event, ui) {
    var topValue = -((100 - ui.value) * difference / 100);
    $(this).parents(".slider-wrap").prev(".scroll-pane").find('.scroll-content').css({
        top: topValue
    });
}

这个问题是$(this) 引用div.slider-vertical 直接在.scroll-content 上调用find 没有产生任何结果，因为.scroll-content 不是div.slider-vertical 的子级。要修复，我们需要遍历 dom 并找到 prev .scroll-pane，然后找到我们的 .scroll-content 并调整 css 值。

更新fiddle。

【讨论】：

非常感谢马克。如果我可以不止一次投票，我肯定会。我自己做了一个小更新并删除了更改事件，因为它不需要。更新小提琴：jsfiddle.net/mitchmalone/XRnxL
没问题，米奇，很高兴我能帮上忙！