diff --git a/src/perfect-scrollbar.css b/src/perfect-scrollbar.css index 6a12f49..4a04e4f 100644 --- a/src/perfect-scrollbar.css +++ b/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; diff --git a/src/perfect-scrollbar.js b/src/perfect-scrollbar.js index c5144de..99def37 100644 --- a/src/perfect-scrollbar.js +++ b/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'); - $scrollbarYRail.removeClass('in-scrolling'); + $this.removeClass('ps-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; } diff --git a/src/perfect-scrollbar.scss b/src/perfect-scrollbar.scss index c1504ac..7675c21 100644 --- a/src/perfect-scrollbar.scss +++ b/src/perfect-scrollbar.scss @@ -46,8 +46,20 @@ } @mixin in-scrolling { - &.in-scrolling { - @include scrollbar-rail-hover; + &.ps-in-scrolling { + 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 {