Implement visible rail feature.

Now the scrollbars are wrapped by rail elements, and
the styles and scripts are heavily changed to implement the feature.

src/perfect-scrollbar.css

@@ -1,75 +1,111 @@
-.ps-container .ps-scrollbar-x {
+.ps-container .ps-scrollbar-x-rail {
     position: absolute; /* please don't change 'position' */
-    bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x */
+    bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x-rail */
     height: 8px;
-    background-color: #aaa;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px;
     opacity: 0;
     filter: alpha(opacity = 0);
-    -o-transition: opacity .2s linear;
+    -o-transition: background-color .2s linear, opacity .2s linear;
-    -webkit-transition: opacity.2s linear;
+    -webkit-transition: background-color.2s linear, opacity .2s linear;
-    -moz-transition: opacity .2s linear;
+    -moz-transition: background-color .2s linear, opacity .2s linear;
-    transition: opacity .2s linear;
+    transition: background-color .2s linear, opacity .2s linear;
+}
+
+.ps-container:hover .ps-scrollbar-x-rail,
+.ps-container.hover .ps-scrollbar-x-rail {
+    opacity: 0.6;
+    filter: alpha(opacity = 60);
+}
+
+.ps-container .ps-scrollbar-x-rail:hover,
+.ps-container .ps-scrollbar-x-rail.hover {
+    background-color: #eee;
+    opacity: 0.9;
+    filter: alpha(opacity = 90);
+}
+
+.ps-container .ps-scrollbar-x-rail.in-scrolling {
+    opacity: 0.9;
+    filter: alpha(opacity = 90);
+}
+
+.ps-container .ps-scrollbar-y-rail {
+    position: absolute; /* please don't change 'position' */
+    right: 3px; /* there must be 'right' for ps-scrollbar-y-rail */
+    width: 8px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    opacity: 0;
+    filter: alpha(opacity = 0);
+    -o-transition: background-color .2s linear, opacity .2s linear;
+    -webkit-transition: background-color.2s linear, opacity .2s linear;
+    -moz-transition: background-color .2s linear, opacity .2s linear;
+    transition: background-color .2s linear, opacity .2s linear;
+}
+
+.ps-container:hover .ps-scrollbar-y-rail,
+.ps-container.hover .ps-scrollbar-y-rail {
+    opacity: 0.6;
+    filter: alpha(opacity = 60);
+}
+
+.ps-container .ps-scrollbar-y-rail:hover,
+.ps-container .ps-scrollbar-y-rail.hover {
+    background-color: #eee;
+    opacity: 0.9;
+    filter: alpha(opacity = 90);
+}
+
+.ps-container .ps-scrollbar-y-rail.in-scrolling {
+    opacity: 0.9;
+    filter: alpha(opacity = 90);
+}
+
+.ps-container .ps-scrollbar-x {
+    position: absolute; /* please don't change 'position' */
+    bottom: 0; /* there must be 'bottom' for ps-scrollbar-x */
+    height: 8px;
+    background-color: #aaa;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -o-transition: background-color .2s linear;
+    -webkit-transition: background-color.2s linear;
+    -moz-transition: background-color .2s linear;
+    transition: background-color .2s linear;
 }
 
 .ps-container.ie6 .ps-scrollbar-x {
     font-size: 0; /* fixed scrollbar height in xp sp3 ie6 */
 }
 
-.ps-container:hover .ps-scrollbar-x,
+.ps-container .ps-scrollbar-x-rail:hover .ps-scrollbar-x,
-.ps-container.hover .ps-scrollbar-x {
+.ps-container .ps-scrollbar-x-rail.hover .ps-scrollbar-x {
-    opacity: 0.6;
+    background-color: #999;
-    filter: alpha(opacity = 60);
-}
-
-.ps-container .ps-scrollbar-x:hover,
-.ps-container .ps-scrollbar-x.hover {
-    opacity: 0.9;
-    filter: alpha(opacity = 90);
-    cursor:default;
-}
-
-.ps-container .ps-scrollbar-x.in-scrolling {
-    opacity: 0.9;
-    filter: alpha(opacity = 90);
 }
 
 .ps-container .ps-scrollbar-y {
     position: absolute; /* please don't change 'position' */
-    right: 3px; /* there must be 'right' for ps-scrollbar-y */
+    right: 0; /* there must be 'right' for ps-scrollbar-y */
     width: 8px;
     background-color: #aaa;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px;
-    opacity: 0;
+    -o-transition: background-color .2s linear;
-    filter: alpha(opacity = 0);
+    -webkit-transition: background-color.2s linear;
-    -o-transition: opacity .2s linear;
+    -moz-transition: background-color .2s linear;
-    -webkit-transition: opacity.2s linear;
+    transition: background-color .2s linear;
-    -moz-transition: opacity .2s linear;
-    transition: opacity .2s linear;
 }
 
 .ps-container.ie .ps-scrollbar-y {
     font-size: 0; /* fixed scrollbar height in xp sp3 ie6 */
 }
 
-.ps-container:hover .ps-scrollbar-y,
+.ps-container .ps-scrollbar-y-rail:hover .ps-scrollbar-y,
-.ps-container.hover .ps-scrollbar-y {
+.ps-container .ps-scrollbar-y-rail.hover .ps-scrollbar-y {
-    opacity: 0.6;
+    background-color: #999;
-    filter: alpha(opacity = 60);
-}
-
-.ps-container .ps-scrollbar-y:hover,
-.ps-container .ps-scrollbar-y.hover {
-    opacity: 0.9;
-    filter: alpha(opacity = 90);
-    cursor: default;
-}
-
-.ps-container .ps-scrollbar-y.in-scrolling {
-    opacity: 0.9;
-    filter: alpha(opacity = 90);
 }

src/perfect-scrollbar.js

@@ -62,8 +62,10 @@
       // Set class to the container
       $this.addClass('ps-container');
 
-      var $scrollbarX = $("<div class='ps-scrollbar-x'></div>").appendTo($this),
+      var $scrollbarXRail = $("<div class='ps-scrollbar-x-rail'></div>").appendTo($this),
-          $scrollbarY = $("<div class='ps-scrollbar-y'></div>").appendTo($this),
+          $scrollbarYRail = $("<div class='ps-scrollbar-y-rail'></div>").appendTo($this),
+          $scrollbarX = $("<div class='ps-scrollbar-x'></div>").appendTo($scrollbarXRail),
+          $scrollbarY = $("<div class='ps-scrollbar-y'></div>").appendTo($scrollbarYRail),
           scrollbarXActive,
           scrollbarYActive,
           containerWidth,
@@ -72,21 +74,21 @@
           contentHeight,
           scrollbarXWidth,
           scrollbarXLeft,
-          scrollbarXBottom = parseInt($scrollbarX.css('bottom'), 10),
+          scrollbarXBottom = parseInt($scrollbarXRail.css('bottom'), 10),
           scrollbarYHeight,
           scrollbarYTop,
-          scrollbarYRight = parseInt($scrollbarY.css('right'), 10);
+          scrollbarYRight = parseInt($scrollbarYRail.css('right'), 10);
 
       var updateContentScrollTop = function () {
         var scrollTop = parseInt(scrollbarYTop * (contentHeight - containerHeight) / (containerHeight - scrollbarYHeight), 10);
         $this.scrollTop(scrollTop);
-        $scrollbarX.css({bottom: scrollbarXBottom - scrollTop});
+        $scrollbarXRail.css({bottom: scrollbarXBottom - scrollTop});
       };
 
       var updateContentScrollLeft = function () {
         var scrollLeft = parseInt(scrollbarXLeft * (contentWidth - containerWidth) / (containerWidth - scrollbarXWidth), 10);
         $this.scrollLeft(scrollLeft);
-        $scrollbarY.css({right: scrollbarYRight - scrollLeft});
+        $scrollbarYRail.css({right: scrollbarYRight - scrollLeft});
       };
 
       var getSettingsAdjustedThumbSize = function (thumbSize) {
@@ -97,8 +99,10 @@
       };
 
       var updateScrollbarCss = function () {
-        $scrollbarX.css({left: scrollbarXLeft + $this.scrollLeft(), bottom: scrollbarXBottom - $this.scrollTop(), width: scrollbarXWidth});
+        $scrollbarXRail.css({left: $this.scrollLeft(), bottom: scrollbarXBottom - $this.scrollTop(), width: containerWidth});
-        $scrollbarY.css({top: scrollbarYTop + $this.scrollTop(), right: scrollbarYRight - $this.scrollLeft(), height: scrollbarYHeight});
+        $scrollbarYRail.css({top: $this.scrollTop(), right: scrollbarYRight - $this.scrollLeft(), height: containerHeight});
+        $scrollbarX.css({left: scrollbarXLeft, width: scrollbarXWidth});
+        $scrollbarY.css({top: scrollbarYTop, height: scrollbarYHeight});
       };
 
       var updateBarSizeAndPosition = function () {
@@ -154,7 +158,8 @@
         else {
           scrollbarXLeft = newLeft;
         }
-        $scrollbarX.css({left: scrollbarXLeft + $this.scrollLeft()});
+        $scrollbarXRail.css({left: $this.scrollLeft()});
+        $scrollbarX.css({left: scrollbarXLeft});
       };
 
       var moveBarY = function (currentTop, deltaY) {
@@ -170,7 +175,8 @@
         else {
           scrollbarYTop = newTop;
         }
-        $scrollbarY.css({top: scrollbarYTop + $this.scrollTop()});
+        $scrollbarYRail.css({top: $this.scrollTop()});
+        $scrollbarY.css({top: scrollbarYTop});
       };
 
       var bindMouseScrollXHandler = function () {
@@ -180,13 +186,13 @@
         $scrollbarX.bind('mousedown.perfect-scrollbar', function (e) {
           currentPageX = e.pageX;
           currentLeft = $scrollbarX.position().left;
-          $scrollbarX.addClass('in-scrolling');
+          $scrollbarXRail.addClass('in-scrolling');
           e.stopPropagation();
           e.preventDefault();
         });
 
         $(document).bind('mousemove.perfect-scrollbar', function (e) {
-          if ($scrollbarX.hasClass('in-scrolling')) {
+          if ($scrollbarXRail.hasClass('in-scrolling')) {
             updateContentScrollLeft();
             moveBarX(currentLeft, e.pageX - currentPageX);
             e.stopPropagation();
@@ -195,8 +201,8 @@
         });
 
         $(document).bind('mouseup.perfect-scrollbar', function (e) {
-          if ($scrollbarX.hasClass('in-scrolling')) {
+          if ($scrollbarXRail.hasClass('in-scrolling')) {
-            $scrollbarX.removeClass('in-scrolling');
+            $scrollbarXRail.removeClass('in-scrolling');
           }
         });
 
@@ -211,13 +217,13 @@
         $scrollbarY.bind('mousedown.perfect-scrollbar', function (e) {
           currentPageY = e.pageY;
           currentTop = $scrollbarY.position().top;
-          $scrollbarY.addClass('in-scrolling');
+          $scrollbarYRail.addClass('in-scrolling');
           e.stopPropagation();
           e.preventDefault();
         });
 
         $(document).bind('mousemove.perfect-scrollbar', function (e) {
-          if ($scrollbarY.hasClass('in-scrolling')) {
+          if ($scrollbarYRail.hasClass('in-scrolling')) {
             updateContentScrollTop();
             moveBarY(currentTop, e.pageY - currentPageY);
             e.stopPropagation();
@@ -226,8 +232,8 @@
         });
 
         $(document).bind('mouseup.perfect-scrollbar', function (e) {
-          if ($scrollbarY.hasClass('in-scrolling')) {
+          if ($scrollbarYRail.hasClass('in-scrolling')) {
-            $scrollbarY.removeClass('in-scrolling');
+            $scrollbarYRail.removeClass('in-scrolling');
           }
         });
 
@@ -449,6 +455,8 @@
         $this.data('perfect-scrollbar-destroy', null);
         $scrollbarX.remove();
         $scrollbarY.remove();
+        $scrollbarXRail.remove();
+        $scrollbarYRail.remove();
 
         // clean all variables
         $scrollbarX =
@@ -476,6 +484,8 @@
             $(this).removeClass('hover');
           };
           $this.bind('mouseenter.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
+          $scrollbarXRail.bind('mouseenter.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
+          $scrollbarYRail.bind('mouseenter.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
           $scrollbarX.bind('mouseenter.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
           $scrollbarY.bind('mouseenter.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
         };