How to reinitialize jScrollPane after loading new contents

Im stuck here, so i post a solution to this problem. When i call the reinitialize function of jScrollPane to change the content using Ajax, I got a blank page problem and the scroll is gone. The culprit is maybe because of the added elements to our scrolled content and some of the event listener to it, that’s why we are getting the error.

After couple of hours solving the problem, I come up with this solution! by just destroying the old jScrollPane and reinitialize it after loading the new contents, we can now see the newly loaded contents and the updated scroll with no height problem.

Below is the javascript code for jScrollPane first init and function for loading the new content:

and here is the HTML code for our jScrollPane content:

So by destroying or clearing the old jScrollPane, we can now reinitialize it with new content and no errors.

Hope this article helps you! If you need help just comment below!

jScrollPane is a scroll customization plugin of jQuery. To learn more about jScrollPane, visit their website at

By erwinbantilan

I'm a Freelance Web Developer (PHP, Flash, Ajax, Javascript, CSS & HTML 4/5), iOS Developer, SEO expert and a Graphic Designer from General Santos City. Profile | | Pattern Lockscreen

Leave a comment

Your email address will not be published. Required fields are marked *

%d bloggers like this: