Question

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

我随后将其变成了一个插件，使其更易于使用，更具可重用性。它工作了99％，但有一个小错误 - 由于某些原因，当我点击滚动条时，它不会滚动DIV元素。

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

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

Answer 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直接在find上调用.scroll-content而没有产生任何结果，因为.scroll-content不是{{1}的孩子}}。要解决此问题，我们需要遍历dom并查找上一个div.slider-vertical，然后找到我们的.scroll-pane并调整css值。

更新了fiddle。

帮助jQuery可滚动插件

1 个答案: