CODEWITHSUNDEEP
javascriptjqueryjscrollpanejquery-jscrollpane
Sherzod
Sherzod

Reputation: 5131

When Jquery jScrollPane is reinitialized, it goes back to the top. Why?

I'm using jquery library jScrollPane to set the custom scroll bar for the whole page.

scroll_bar = $('body>div').jScrollPane(
     {
        autoReinitialise: true,
            showArrows: true,
            maintainPosition: false
     }).data('jsp');

When new content is added at the bottom of the page (while user is at the bottom of the page), I call:

scroll_bar.getContentPane().find(".content").append(some_content);
scroll_bar.reinitialise();

This reinitializes the scroll bar, but it takes the user to the top of the page. I would like the window to stay at the same spot. Any solutions?

Upvotes: 2

Views: 4719

Answers (4)

Fred Johnson
Fred Johnson

Reputation: 2695

For people who have issues re-initializing after the above:

function reinitialiseScrollpane() {

        var settings = {
            maintainPosition: true,
            // add your settings here, below are examples
            arrowButtonSpeed: 1,
            showArrows: true,
            animateScroll: true 
        };

    pane.jScrollPane(settings); 
    var api = pane.data('jsp');
    api.getContentPane().append();
    api.reinitialise();

}

The important part is using the settings. Without re-initialising the settings, it can be glitchy. I have put it in a function call, so you simply call this whenever content is altered in any of your scroll panes (assuming you kept the .scroll-pane class with all regions)

Upvotes: 0

Dave Newton
Dave Newton

Reputation: 160191

From the docs:

  • maintainPosition [boolean] - Whether you want the contents of the scroll pane to maintain it's position when you re-initialise it - so it doesn't scroll as you add more content (default true)

You set it to false.

Upvotes: 0

shennyL
shennyL

Reputation: 2794

If you want the scroll bar to retain its position, you should set the 

      maintainPosition: true

Also, try reconstruct the code like this:

            // Use jscrollpane api function to enable reinitialization
            var scrollelement = $('body>div').jScrollPane({ maintainPosition: true});
            var api = scrollelement.data('jsp');
            api.getContentPane().html(result);


            // Needed to apply jscrollpane after change new container type
            api.reinitialise();

Hope this help :)

Upvotes: 0

adeneo
adeneo

Reputation: 318182

Are you sure you're getting the data needed, I have no idea if this works, but have you tried:

scroll_bar = $('body>div').jScrollPane(
   {
      autoReinitialise: true,
          showArrows: true,
          maintainPosition: false
   });

scroll_bar.data('jsp');

And would'nt you normally use the .scroll-pane class for this, and not the body>div selector ?

I would think maybe it should be something like this:

var api = scroll_bar.data('jsp');
api.reinitialise();

Upvotes: 0

Related Questions