cartodb/perfect-scrollbar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change how .in-scrolling works.

Browse Source 
Now we add `.ps-in-scrolling` class in a container div.
`pointer-events: none;` is also added for the class.
This commit is contained in:
Hyunje Alex Jun 2014-12-09 23:53:25 +00:00
parent d6558c492d
commit b927c177ca
3 changed files with 56 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/perfect-scrollbar.css
View File

@ -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;

20
src/perfect-scrollbar.js
View File

@ -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;
}

25
src/perfect-scrollbar.scss
View File

@ -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 {