jQuery NiceScroll Plugin doesn’t work for dynamic content

jQuery NiceScroll Plugin is a very convenient tool for customizing your website scrollbar.
Create a better scrollbar using jQuery NiceScroll Plugin

By default, the scrollbar is hidden if the content doesn’t exceed the content wrapper height. So if you have dynamic content, you have to tell the NiceScroll plugin to resize otherwise the scrollbar doesn’t show.

Let’s start with the following index.html.

<html>
<head>
  <title>Eureka! - jQuery NiceScroll Plugin</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <script src="./js/jquery.nicescroll.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      // Hide the content
      $('#scroll-area span').hide();

      // Apply the NiceScroll plugin
      $('#scroll-area').niceScroll({
        autohidemode: 'false',     // Do not hide scrollbar when mouse out
        cursorborderradius: '0px', // Scroll cursor radius
        background: '#E5E9E7',     // The scrollbar rail color
        cursorwidth: '10px',       // Scroll cursor width
        cursorcolor: '#999999'     // Scroll cursor color
      });

      // Implementation of the view more function
      $('#view-more').click(function(){
        $('#scroll-area span').show();
      });
    });
  </script>
  <style type="text/css">
    #scroll-area {
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div id="scroll-area">
    <a id="view-more" href="#">View more</a>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque viverra facilisis lacus, sed dignissim urna pharetra consectetur. Integer eget imperdiet augue. Mauris nec elit augue, ac condimentum dolor. Proin eget enim et massa dignissim elementum et vitae augue. Morbi adipiscing imperdiet ligula, non porttitor nisi varius nec. Fusce vehicula venenatis faucibus. Nulla tincidunt tristique turpis, sollicitudin semper lectus vehicula lobortis.</span>
  </div>
</body>
</html>

 

The scrollbar will fail in the above example. To fix the problem, you should call the resize() function when the content is updated.

...
// Implementation of the view more function
$('#view-more').click(function(){
  $('#scroll-area span').show();

  // Trigger the NiceScroll to resize
  $('#scroll-area').getNiceScroll().resize();
});
...

 

If you have no access on the implementation, you can just implement the mouseover function on the content wrapper as a workaround.

...
// Call resize whenever mouse
$("#scroll-area").mouseover(function() {
  $("#scroll-area").getNiceScroll().resize();
});
...

 

Done =)

Reference:

Advertisements

3 thoughts on “jQuery NiceScroll Plugin doesn’t work for dynamic content”

  1. Thanks, Now it is working perfectly for me while loading dynamic contents through Ajax call in a particular Div where Nice-scroll bar works.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s