Add update and destroy function, enhance css.

this is the release version!

min/perfect-scrollbar.min.css

@@ -1 +1 @@
-.ps-container .ps-scrollbar-x{position:absolute;height:10px;bottom:5px;background-color:gray}.ps-container .ps-scrollbar-x:hover{background-color:#000;cursor:default}.ps-container .ps-scrollbar-x.in-scrolling{background-color:#000}.ps-container .ps-scrollbar-y{position:absolute;width:10px;right:5px;background-color:gray}.ps-container .ps-scrollbar-y:hover{background-color:#000;cursor:default}.ps-container .ps-scrollbar-y.in-scrolling{background-color:#000}
+.ps-container .ps-scrollbar-x{position:absolute;bottom:3px;height:8px;background-color:#aaa;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;opacity:0;filter:alpha(opacity=0);-webkit-transition:opacity.2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear}.ps-container:hover .ps-scrollbar-x{opacity:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-x:hover{opacity:.9;filter:alpha(opacity=90);cursor:default}.ps-container .ps-scrollbar-x.in-scrolling{opacity:.9;filter:alpha(opacity=90)}.ps-container .ps-scrollbar-y{position:absolute;right:3px;width:8px;background-color:#aaa;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;opacity:0;-webkit-transition:opacity.2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear}.ps-container:hover .ps-scrollbar-y{opacity:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-y:hover{opacity:.9;filter:alpha(opacity=90);cursor:default}.ps-container .ps-scrollbar-y.in-scrolling{opacity:.9;filter:alpha(opacity=90)}

min/perfect-scrollbar.min.js

@@ -1,3 +1,3 @@
 /* Copyright (c) 2012 HyeonJe Jun (http://github.com/noraesae)
  * Licensed under the MIT License
- */(function(e){e.fn.perfectScrollbar=function(){var t=e(this).addClass("ps-container"),n=e(this).children(),r=e("<div class='ps-scrollbar-x'></div>").appendTo(t),i=e("<div class='ps-scrollbar-y'></div>").appendTo(t),s,o,u,a,f,l,c=parseInt(r.css("bottom")),h,p,d=parseInt(i.css("right")),v=function(){var e=parseInt(p*a/o);t.scrollTop(e),r.css({bottom:c-e})},m=function(){var e=parseInt(l*u/s);t.scrollLeft(e),i.css({right:d-e})},g=function(){s=t.width(),o=t.height(),u=n.width(),a=n.height(),s<u?(f=parseInt(s*s/u),l=parseInt(t.scrollLeft()*s/u)):(f=0,l=0),o<a?(h=parseInt(o*o/a),p=parseInt(t.scrollTop()*o/a)):(h=0,scrollbar_y_left=0),r.css({left:l+t.scrollLeft(),bottom:c-t.scrollTop(),width:f}),i.css({top:p+t.scrollTop(),right:d-t.scrollLeft(),height:h})},y=function(e,n){var i=e+n,o=s-f;i<0?l=0:i>o?l=o:l=i,r.css({left:l+t.scrollLeft()})},b=function(e,n){var r=e+n,s=o-h;r<0?p=0:r>s?p=s:p=r,i.css({top:p+t.scrollTop()})},w=function(){var t,n;r.bind("mousedown.perfect-scroll",function(e){n=e.pageX,t=r.position().left,r.addClass("in-scrolling"),e.stopPropagation(),e.preventDefault()}),e(window).bind("mousemove.perfect-scroll",function(e){r.hasClass("in-scrolling")&&(y(t,e.pageX-n),m(),e.stopPropagation(),e.preventDefault())}),e(window).bind("mouseup.perfect-scroll",function(e){r.hasClass("in-scrolling")&&r.removeClass("in-scrolling")})},E=function(){var t,n;i.bind("mousedown.perfect-scroll",function(e){n=e.pageY,t=i.position().top,i.addClass("in-scrolling"),e.stopPropagation(),e.preventDefault()}),e(window).bind("mousemove.perfect-scroll",function(e){i.hasClass("in-scrolling")&&(b(t,e.pageY-n),v(),e.stopPropagation(),e.preventDefault())}),e(window).bind("mouseup.perfect-scroll",function(e){i.hasClass("in-scrolling")&&i.removeClass("in-scrolling")})},S=function(){t.mousewheel(function(e,n,r,i){t.scrollTop(t.scrollTop()-i*10),t.scrollLeft(t.scrollLeft()+r*10),g(),(a>o||u>s)&&e.preventDefault()})};return g(),w(),E(),t.mousewheel&&S(),t}})(jQuery);
+ */(function(e){e.fn.perfectScrollbar=function(t){if(t==="update"){e(this).data("perfect_scrollbar_update")();return}if(t==="destroy"){e(this).data("perfect_scrollbar_destroy")();return}if(e(this).data("perfect_scrollbar"))return;var n=e(this).addClass("ps-container"),r=e(this).children(),i=e("<div class='ps-scrollbar-x'></div>").appendTo(n),s=e("<div class='ps-scrollbar-y'></div>").appendTo(n),o,u,a,f,l,c,h=parseInt(i.css("bottom")),p,d,v=parseInt(s.css("right")),m=function(){var e=parseInt(d*f/u);n.scrollTop(e),i.css({bottom:h-e})},g=function(){var e=parseInt(c*a/o);n.scrollLeft(e),s.css({right:v-e})},y=function(){o=n.width(),u=n.height(),a=r.width(),f=r.height(),o<a?(l=parseInt(o*o/a),c=parseInt(n.scrollLeft()*o/a)):(l=0,c=0),u<f?(p=parseInt(u*u/f),d=parseInt(n.scrollTop()*u/f)):(p=0,scrollbar_y_left=0),i.css({left:c+n.scrollLeft(),bottom:h-n.scrollTop(),width:l}),s.css({top:d+n.scrollTop(),right:v-n.scrollLeft(),height:p})},b=function(e,t){var r=e+t,s=o-l;r<0?c=0:r>s?c=s:c=r,i.css({left:c+n.scrollLeft()})},w=function(e,t){var r=e+t,i=u-p;r<0?d=0:r>i?d=i:d=r,s.css({top:d+n.scrollTop()})},E=function(){var t,n;i.bind("mousedown.perfect-scroll",function(e){n=e.pageX,t=i.position().left,i.addClass("in-scrolling"),e.stopPropagation(),e.preventDefault()}),e(window).bind("mousemove.perfect-scroll",function(e){i.hasClass("in-scrolling")&&(b(t,e.pageX-n),g(),e.stopPropagation(),e.preventDefault())}),e(window).bind("mouseup.perfect-scroll",function(e){i.hasClass("in-scrolling")&&i.removeClass("in-scrolling")})},S=function(){var t,n;s.bind("mousedown.perfect-scroll",function(e){n=e.pageY,t=s.position().top,s.addClass("in-scrolling"),e.stopPropagation(),e.preventDefault()}),e(window).bind("mousemove.perfect-scroll",function(e){s.hasClass("in-scrolling")&&(w(t,e.pageY-n),m(),e.stopPropagation(),e.preventDefault())}),e(window).bind("mouseup.perfect-scroll",function(e){s.hasClass("in-scrolling")&&s.removeClass("in-scrolling")})},x=function(){n.mousewheel(function(e,t,r,i){n.scrollTop(n.scrollTop()-i*10),n.scrollLeft(n.scrollLeft()+r*10),y(),(f>u||a>o)&&e.preventDefault()})},T=function(){i.remove(),s.remove(),n.unbind("mousewheel"),e(window).unbind("mousemove.perfect-scroll"),e(window).unbind("mouseup.perfect-scroll"),n.data("perfect_scrollbar",null),n.data("perfect_scrollbar_update",null),n.data("perfect_scrollbar_destroy",null)},N=function(){y(),E(),S(),n.mousewheel&&x(),n.data("perfect_scrollbar",!0),n.data("perfect_scrollbar_update",y),n.data("perfect_scrollbar_destroy",T)};return N(),n}})(jQuery);

src/perfect-scrollbar.css

@@ -1,31 +1,60 @@
 .ps-container .ps-scrollbar-x {
-    position: absolute;
+    position: absolute; /* please don't change 'position' */
-    height: 10px;
+    bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x */
-    bottom: 5px;
+    height: 8px;
-    background-color: gray;
+    background-color: #aaa;
+    border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    opacity: 0;
+    filter: alpha(opacity = 0);
+    -webkit-transition: opacity.2s linear;
+    -moz-transition: opacity .2s linear;
+    transition: opacity .2s linear;
+}
+
+.ps-container:hover .ps-scrollbar-x {
+    opacity: 0.6;
+    filter: alpha(opacity = 60);
 }
 
 .ps-container .ps-scrollbar-x:hover {
-    background-color: black;
+    opacity: 0.9;
+    filter: alpha(opacity = 90);
     cursor:default;
 }
 
 .ps-container .ps-scrollbar-x.in-scrolling {
-    background-color: black;
+    opacity: 0.9;
+    filter: alpha(opacity = 90);
 }
 
 .ps-container .ps-scrollbar-y {
-    position: absolute;
+    position: absolute; /* please don't change 'position' */
-    width: 10px;
+    right: 3px; /* there must be 'right' for ps-scrollbar-y */
-    right: 5px;
+    width: 8px;
-    background-color: gray;
+    background-color: #aaa;
+    border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    opacity: 0;
+    -webkit-transition: opacity.2s linear;
+    -moz-transition: opacity .2s linear;
+    transition: opacity .2s linear;
+}
+
+.ps-container:hover .ps-scrollbar-y {
+    opacity: 0.6;
+    filter: alpha(opacity = 60);
 }
 
 .ps-container .ps-scrollbar-y:hover {
-    background-color: black;
+    opacity: 0.9;
+    filter: alpha(opacity = 90);
     cursor: default;
 }
 
 .ps-container .ps-scrollbar-y.in-scrolling {
-    background-color: black;
+    opacity: 0.9;
+    filter: alpha(opacity = 90);
 }

src/perfect-scrollbar.js

@@ -2,7 +2,21 @@
  * Licensed under the MIT License
  */
 ((function($) {
-    $.fn.perfectScrollbar = function() {
+    $.fn.perfectScrollbar = function(option) {
+        if(option === 'update') {
+            $(this).data('perfect_scrollbar_update')();
+            return;
+        }
+        else if(option === 'destroy') {
+            $(this).data('perfect_scrollbar_destroy')();
+            return;
+        }
+
+        if($(this).data('perfect_scrollbar')) {
+            // if there's already perfect_scrollbar
+            return;
+        }
+
         var $this = $(this).addClass('ps-container'),
             $content = $(this).children(),
             $scrollbar_x = $("<div class='ps-scrollbar-x'></div>").appendTo($this),
@@ -159,11 +173,29 @@
             });
         };
 
+        var destroy = function() {
+            $scrollbar_x.remove();
+            $scrollbar_y.remove();
+            $this.unbind('mousewheel');
+            $(window).unbind('mousemove.perfect-scroll');
+            $(window).unbind('mouseup.perfect-scroll');
+            $this.data('perfect_scrollbar', null);
+            $this.data('perfect_scrollbar_update', null);
+            $this.data('perfect_scrollbar_destroy', null);
+        };
+
+        var initialize = function() {
+            updateBarSizeAndPosition();
+            bindMouseScrollXHandler();
+            bindMouseScrollYHandler();
+            if($this.mousewheel) bindMouseWheelHandler();
+            $this.data('perfect_scrollbar', true);
+            $this.data('perfect_scrollbar_update', updateBarSizeAndPosition);
+            $this.data('perfect_scrollbar_destroy', destroy);
+        };
+
         // initialize
-        updateBarSizeAndPosition();
+        initialize();
-        bindMouseScrollXHandler();
-        bindMouseScrollYHandler();
-        if($this.mousewheel) bindMouseWheelHandler();
 
         return $this;
     };