1

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

In this example jscrollpane uses a class selector to bind functionality to the events. I cannot seem to bind to only one object:

 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
});

works as intended. If a add another scrollable area which I dont want the above to be bound to, I would think that I create another instance (and a seperate object)

something simple like

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

Which, the scrollbars appear but every time I scroll to the bottom of these elements, the other bound function fires!

anyone know whats going on here?

regards

3
  • Your second selector $('.accScrollable').jScrollPane() binds to all elements with the class "accScrollable". Does #scrollable have that class?
    – Stefan
    Jan 10, 2012 at 11:54
  • nope, definately doesn't Jan 10, 2012 at 11:59
  • Could you include your HTML as well?
    – Stefan
    Jan 10, 2012 at 12:01

2 Answers 2

1

It sounded like what you were describing was a bug so I just put together a simple example to test. You can see it here:

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

Here is the javascript code:

$('.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);
    }
);

If you scroll #pane1 you will get the console message with #pane1 in it and if you scroll #pane2 you will get the message which starts with #pane2.

So it seems that the bug is with your code and not with jScrollPane. Since you don't include the whole code or a link to it we can't really help but hopefully this example shows you how you can bind listeners to different DOM elements...

2
0

Your event handler for jsp-scroll-y affects elements without a solid relation to the bound element this, in this case #scrollable.

Does you HTML contain multiple #navigation, #lioverview or .content?

5
  • .content is used in the first instance to detect how far down the page has been scrolled to each section to light up the navigation bar. Jan 10, 2012 at 12:09
  • also adding an alert into the bound function fires the first instance html ($(this).html()) even when scrolling in the unrelated area. Jan 10, 2012 at 12:14
  • Add console.log('at bottom', this); within if (isAtBottom) { } in your jsp-scroll-y event handler function. It should show you the current element when the event is triggered and isAtBottom is true.
    – Stefan
    Jan 10, 2012 at 12:18
  • yup, no matter the element, at bottom <div id="scrollable" class="jspScrollable" style="overflow: hidden; padding: 0px; width: 1024px;" tabindex="0"> is the output Jan 10, 2012 at 12:23
  • Make sure you have a valid HTML and that you´re not leaving any element open.
    – Stefan
    Jan 10, 2012 at 13:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.