jScrollPane - 绑定到事件会添加到所有实例

Question

http://jscrollpane.kelvinluck.com/events.html

在此示例中，jscrollpane 使用类选择器将功能绑定到事件。我似乎无法只绑定到一个对象：

 var pane = $('#scrollable');
pane.bind(
    'jsp-scroll-y',
    function (event, scrollPositionY, isAtTop, isAtBottom) {
        if (isAtBottom) {
            $('#navigation').addClass('hiddenAtBottom');
        } else {
            $('#navigation').removeClass('hiddenAtBottom');
        }
        if (isAtTop) {
            $('#lioverview a').addClass('focus');
        } else {
            $('#lioverview a').removeClass('focus');
        }
        $('.content').each(function (i) {
            var ob = $(this);
            var offSet = ob.offset();
            var newOffset = (offSet.top - 150);
            if (newOffset <= 0) {
                $('#navigation a').removeClass('focus');
                $('#navigation li:eq(' + i + ') a').addClass('focus');
            }

        });
    }
);
pane.jScrollPane({
    animateScroll: true,
    animateDuration: 2500,
    animateEase: '',
    hijackInternalLinks: true
});

按预期工作。如果添加另一个我不希望上面绑定的可滚动区域，我会认为我创建了另一个实例（和一个单独的对象），

就像它一样简单

$('.accScrollable').jScrollPane();

，滚动条出现，但每次我滚动到这些元素的底部，另一个绑定函数被触发！

有人知道这里发生了什么事吗？

问候

Answer 1

听起来你所描述的是一个错误，所以我只是整理了一个简单的例子来测试。你可以在这里看到它：

http://jsfiddle.net/qSf2q/1/

这是 javascript代码：

$('.scroll-pane').jScrollPane();


$('#pane1').bind(
    'jsp-scroll-y',
    function(event, scrollPositionY, isAtTop, isAtBottom)
    {
        console.log('#pane1 Handle jsp-scroll-y', this,
                        'scrollPositionY=', scrollPositionY,
                        'isAtTop=', isAtTop,
                        'isAtBottom=', isAtBottom);
    }
);
$('#pane2').bind(
    'jsp-scroll-y',
    function(event, scrollPositionY, isAtTop, isAtBottom)
    {
        console.log('#pane2 Handle jsp-scroll-y', this,
                        'scrollPositionY=', scrollPositionY,
                        'isAtTop=', isAtTop,
                        'isAtBottom=', isAtBottom);
    }
);

如果您滚动#pane1，您将收到包含#pane1 的控制台消息，如果您滚动#pane2，您将收到以#pane2 开头的消息。

所以看起来这个错误是在你的代码中，而不是在 jScrollPane 中。由于您没有包含完整的代码或指向它的链接，我们无法真正提供帮助，但希望这个示例向您展示如何将侦听器绑定到不同的 DOM 元素...

Answer 2

jsp-scroll-y 的事件处理程序会影响与绑定元素 this 没有牢固关系的元素，在本例中是 #scrollable。

您的 HTML 是否包含多个 #navigation、#lioverview 或 .content？