Change how .in-scrolling works.

Now we add `.ps-in-scrolling` class in a container div.
`pointer-events: none;` is also added for the class.

src/perfect-scrollbar.css

@@ -1,5 +1,21 @@
 .ps-container.ps-active-x > .ps-scrollbar-x-rail, .ps-container.ps-active-y > .ps-scrollbar-y-rail {
   display: block; }
+.ps-container.ps-in-scrolling {
+  pointer-events: none; }
+  .ps-container.ps-in-scrolling > .ps-scrollbar-x-rail {
+    background-color: #eee;
+    opacity: 0.9;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+    filter: alpha(opacity=90); }
+    .ps-container.ps-in-scrolling > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+      background-color: #999; }
+  .ps-container.ps-in-scrolling > .ps-scrollbar-y-rail {
+    background-color: #eee;
+    opacity: 0.9;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+    filter: alpha(opacity=90); }
+    .ps-container.ps-in-scrolling > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+      background-color: #999; }
 .ps-container > .ps-scrollbar-x-rail {
   display: none;
   position: absolute;
@@ -33,11 +49,6 @@
     bottom: 0;
     /* there must be 'bottom' for ps-scrollbar-x */
     height: 8px; }
-  .ps-container > .ps-scrollbar-x-rail.in-scrolling {
-    background-color: #eee;
-    opacity: 0.9;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
-    filter: alpha(opacity=90); }
 .ps-container > .ps-scrollbar-y-rail {
   display: none;
   position: absolute;
@@ -71,20 +82,26 @@
     right: 0;
     /* there must be 'right' for ps-scrollbar-y */
     width: 8px; }
-  .ps-container > .ps-scrollbar-y-rail.in-scrolling {
+.ps-container:hover.ps-in-scrolling {
+  pointer-events: none; }
+  .ps-container:hover.ps-in-scrolling > .ps-scrollbar-x-rail {
     background-color: #eee;
     opacity: 0.9;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
     filter: alpha(opacity=90); }
+    .ps-container:hover.ps-in-scrolling > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+      background-color: #999; }
+  .ps-container:hover.ps-in-scrolling > .ps-scrollbar-y-rail {
+    background-color: #eee;
+    opacity: 0.9;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+    filter: alpha(opacity=90); }
+    .ps-container:hover.ps-in-scrolling > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+      background-color: #999; }
 .ps-container:hover > .ps-scrollbar-x-rail, .ps-container:hover > .ps-scrollbar-y-rail {
   opacity: 0.6;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
   filter: alpha(opacity=60); }
-  .ps-container:hover > .ps-scrollbar-x-rail.in-scrolling, .ps-container:hover > .ps-scrollbar-y-rail.in-scrolling {
-    background-color: #eee;
-    opacity: 0.9;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
-    filter: alpha(opacity=90); }
 .ps-container:hover > .ps-scrollbar-x-rail:hover {
   background-color: #eee;
   opacity: 0.9;

src/perfect-scrollbar.js

@@ -267,14 +267,14 @@
         };
 
         var mouseUpHandler = function (e) {
-          $scrollbarXRail.removeClass('in-scrolling');
+          $this.removeClass('ps-in-scrolling');
           $(ownerDocument).unbind(eventClass('mousemove'), mouseMoveHandler);
         };
 
         $scrollbarX.bind(eventClass('mousedown'), function (e) {
           currentPageX = e.pageX;
           currentLeft = $scrollbarX.position().left;
-          $scrollbarXRail.addClass('in-scrolling');
+          $this.addClass('ps-in-scrolling');
 
           $(ownerDocument).bind(eventClass('mousemove'), mouseMoveHandler);
           $(ownerDocument).one(eventClass('mouseup'), mouseUpHandler);
@@ -299,14 +299,14 @@
         };
 
         var mouseUpHandler = function (e) {
-          $scrollbarYRail.removeClass('in-scrolling');
+          $this.removeClass('ps-in-scrolling');
           $(ownerDocument).unbind(eventClass('mousemove'), mouseMoveHandler);
         };
 
         $scrollbarY.bind(eventClass('mousedown'), function (e) {
           currentPageY = e.pageY;
           currentTop = $scrollbarY.position().top;
-          $scrollbarYRail.addClass('in-scrolling');
+          $this.addClass('ps-in-scrolling');
 
           $(ownerDocument).bind(eventClass('mousemove'), mouseMoveHandler);
           $(ownerDocument).one(eventClass('mouseup'), mouseUpHandler);
@@ -597,8 +597,8 @@
             clearInterval(scrollingLoop);
             scrollingLoop = null;
           }
-          $scrollbarXRail.removeClass('in-scrolling');
+          $this.removeClass('ps-in-scrolling');
-          $scrollbarYRail.removeClass('in-scrolling');
+          $this.removeClass('ps-in-scrolling');
         }
 
         var isSelected = false;
@@ -630,10 +630,10 @@
 
             if (mousePosition.x < containerGeometry.left + 3) {
               scrollDiff.left = -5;
-              $scrollbarXRail.addClass('in-scrolling');
+              $this.addClass('ps-in-scrolling');
             } else if (mousePosition.x > containerGeometry.right - 3) {
               scrollDiff.left = 5;
-              $scrollbarXRail.addClass('in-scrolling');
+              $this.addClass('ps-in-scrolling');
             } else {
               scrollDiff.left = 0;
             }
@@ -644,14 +644,14 @@
               } else {
                 scrollDiff.top = -20;
               }
-              $scrollbarYRail.addClass('in-scrolling');
+              $this.addClass('ps-in-scrolling');
             } else if (mousePosition.y > containerGeometry.bottom - 3) {
               if (mousePosition.y - containerGeometry.bottom + 3 < 5) {
                 scrollDiff.top = 5;
               } else {
                 scrollDiff.top = 20;
               }
-              $scrollbarYRail.addClass('in-scrolling');
+              $this.addClass('ps-in-scrolling');
             } else {
               scrollDiff.top = 0;
             }

src/perfect-scrollbar.scss

@@ -46,8 +46,20 @@
 }
 
 @mixin in-scrolling {
-  &.in-scrolling {
+  &.ps-in-scrolling {
-    @include scrollbar-rail-hover;
+    pointer-events: none;
+    >.ps-scrollbar-x-rail {
+      @include scrollbar-rail-hover;
+      >.ps-scrollbar-x {
+        @include scrollbar-hover;
+      }
+    }
+    >.ps-scrollbar-y-rail {
+      @include scrollbar-rail-hover;
+      >.ps-scrollbar-y {
+        @include scrollbar-hover;
+      }
+    }
   }
 }
 
@@ -57,6 +69,8 @@
     display: block;
   }
 
+  @include in-scrolling;
+
   >.ps-scrollbar-x-rail {
     @include scrollbar-rail-default;
     bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x-rail */
@@ -67,8 +81,6 @@
       bottom: 0; /* there must be 'bottom' for ps-scrollbar-x */
       height: 8px;
     }
-
-    @include in-scrolling;
   }
 
   >.ps-scrollbar-y-rail {
@@ -81,15 +93,14 @@
       right: 0; /* there must be 'right' for ps-scrollbar-y */
       width: 8px;
     }
-
-    @include in-scrolling;
   }
 
   &:hover {
+    @include in-scrolling;
+
     >.ps-scrollbar-x-rail,
     >.ps-scrollbar-y-rail {
       @include opacity(0.6);
-      @include in-scrolling;
     }
 
     >.ps-scrollbar-x-rail:hover {