Search code examples
javascriptjqueryjscrollpanejquery-jscrollpane

jscroll pane multiple div with same class


I have an html page that contain multiple divs with same class name. i-e

<div class='some-class'>
<div class='some-class'>
<div class='some-class'>

I have used jscroll pane for nice and fancy scrollbar. it is working fine. but scrollToBottom() function isn't working correctly. the scroll of only first div is setting to bottom remaining divs scroll-bar are remain same to top.

here are my functions

var scrollPane = $('.some-class').jScrollPane().data('jsp');
scrollPane.scrollToBottom();

Solution

  • If you need that ALL of your divs with scroll go to down, iterate through them:

    var scrollPanes = $('.some-class');
    scrollPanes.each(function() {
        var jsp = $(this).jScrollPane().data('jsp');
        jsp.scrollToBottom();
    });
    

    If you need that only ONE of your divs with scroll go to down, you need to mark the divs with another class (or id, or custom attribute), and apply only to it:

    <div class="some-class only-this"></div>
    <div class="some-class only-that"></div>
    <div class="some-class only-self"></div>
    

    With JS:

    var scrollPane = $('.some-class.only-this').jScrollPane().data('jsp');
    scrollPane.scrollToBottom();