Recalculate scrollbar size when .slimscroll() is called again. Extremely

useful when we update the content dynamically / using ajax.
rochal · Mar 11, 2013 · 8eb8459 · 8eb8459
1 parent 1ac38d2
commit 8eb8459
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 25 deletions.
diff --git a/examples/dynamic-content.html b/examples/dynamic-content.html
@@ -0,0 +1,81 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<html>
+<head>
+<title>jquery.slimscroll - dynamic content</title>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
+<link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />
+<script type="text/javascript" src="libs/prettify/prettify.js"></script>
+<script type="text/javascript" src="../jquery.slimscroll.js"></script>
+<link href="style.css" type="text/css" rel="stylesheet" />
+</head>
+<body>
+<a id="git-fork" href="https://github.com/rochal/jQuery-slimScroll"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
+<div class="examples">
+
+
+  <div id="testDiv">
+  </div>
+
+  <pre class="prettyprint">
+  // update content every second
+  setInterval(function(){
+    var el = $('&lt;div&gt;&lt;/div&gt;').html('#' + $('#testDiv').children().length)
+            .css({ padding: '3px', border: '1px solid #ccc', margin: '5px' });
+    $('#testDiv').append(el);
+
+    // update slimscroll every time content changes
+    $('#testDiv').slimscroll();
+  }, 1000);
+
+  $('#testDiv').slimscroll({
+    alwaysVisible: true,
+    height: 150
+  });
+  </pre>
+
+
+
+</div>
+
+<script type="text/javascript">
+    $(function(){
+
+      // update content every second
+      setInterval(function(){
+        var el = $('<div></div>').html('#' + $('#testDiv').children().length)
+                .css({ padding: '3px', border: '1px solid #ccc', margin: '5px' });
+        $('#testDiv').append(el);
+
+        // update slimscroll every time content changes
+        $('#testDiv').slimscroll();
+      }, 1000);
+
+      $('#testDiv').slimscroll({
+        alwaysVisible: true,
+        height: 150
+      });
+
+    });
+</script>
+
+
+<script type="text/javascript">
+
+  //enable syntax highlighter
+  prettyPrint();
+
+  var _gaq = _gaq || [];
+  _gaq.push(['_setAccount', 'UA-3112455-22']);
+  _gaq.push(['_setDomainName', 'none']);
+  _gaq.push(['_trackPageview']);
+
+  (function() {
+    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+  })();
+</script>
+</body>
+</html>
diff --git a/jquery.slimscroll.js b/jquery.slimscroll.js
@@ -100,7 +100,7 @@
             getBarHeight();
 
             // check if we should scroll existing instance
-            if (options)
+            if ($.isPlainObject(options))
             {
               if ('scrollTo' in options)
               {
@@ -253,7 +253,29 @@
           }
         });
 
-        var _onWheel = function(e)
+        // check start position
+        if (o.start === 'bottom')
+        {
+          // scroll content to bottom
+          bar.css({ top: me.outerHeight() - bar.outerHeight() });
+          scrollContent(0, true);
+        }
+        else if (o.start !== 'top')
+        {
+          // assume jQuery selector
+          scrollContent($(o.start).position().top, null, true);
+
+          // make sure bar stays hidden
+          if (!o.alwaysVisible) { bar.hide(); }
+        }
+
+        // attach scroll events
+        attachWheel();
+
+        // set up initial height
+        getBarHeight();
+
+        function _onWheel(e)
         {
           // use mouse wheel only when mouse is over
           if (!isOverPanel) { return; }
@@ -323,7 +345,7 @@
           hideBar();
         }
 
-        var attachWheel = function()
+        function attachWheel()
         {
           if (window.addEventListener)
           {
@@ -336,18 +358,16 @@
           }
         }
 
-        // attach scroll events
-        attachWheel();
-
         function getBarHeight()
         {
           // calculate scrollbar height and make sure it is not too small
           barHeight = Math.max((me.outerHeight() / me[0].scrollHeight) * me.outerHeight(), minBarHeight);
           bar.css({ height: barHeight + 'px' });
-        }
 
-        // set up initial height
-        getBarHeight();
+          // hide scrollbar if content is not long enough
+          var display = barHeight == me.outerHeight() ? 'none' : 'block';
+          bar.css({ display: display });
+        }
 
         function showBar()
         {
@@ -356,7 +376,7 @@
           clearTimeout(queueHide);
 
           // when bar reached top or bottom
-          if (percentScroll == ~~ percentScroll)
+          if (percentScroll == ~~percentScroll)
           {
             //release wheel
             releaseScroll = o.allowPageScroll;
@@ -395,21 +415,6 @@
           }
         }
 
-        // check start position
-        if (o.start == 'bottom')
-        {
-          // scroll content to bottom
-          bar.css({ top: me.outerHeight() - bar.outerHeight() });
-          scrollContent(0, true);
-        }
-        else if (typeof o.start == 'object')
-        {
-          // scroll content
-          scrollContent($(o.start).position().top, null, true);
-
-          // make sure bar stays hidden
-          if (!o.alwaysVisible) { bar.hide(); }
-        }
       });
 
       // maintain chainability