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

Change how scrollbar rails are being hidden.

Browse Source 
Inline CSS change is bad practice.
This commit is contained in:
Hyunje Alex Jun 2014-10-28 18:01:23 +00:00
parent d0b97e4039
commit f099448e44
2 changed files with 12 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/perfect-scrollbar.css
View File

@ -1,4 +1,5 @@
.ps-container>.ps-scrollbar-x-rail { .ps-container>.ps-scrollbar-x-rail {
display: none;
position: absolute; /* please don't change 'position' */ position: absolute; /* please don't change 'position' */
bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x-rail */ bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x-rail */
height: 8px; height: 8px;
@ -13,6 +14,10 @@
transition: background-color .2s linear, opacity .2s linear; transition: background-color .2s linear, opacity .2s linear;
} }
.ps-container.ps-active-x>.ps-scrollbar-x-rail {
display: block;
}
.ps-container:hover>.ps-scrollbar-x-rail { .ps-container:hover>.ps-scrollbar-x-rail {
opacity: 0.6; opacity: 0.6;
filter: alpha(opacity=60); filter: alpha(opacity=60);
@ -31,6 +36,7 @@
} }
.ps-container>.ps-scrollbar-y-rail { .ps-container>.ps-scrollbar-y-rail {
display: block;
position: absolute; /* please don't change 'position' */ position: absolute; /* please don't change 'position' */
right: 3px; /* there must be 'right' for ps-scrollbar-y-rail */ right: 3px; /* there must be 'right' for ps-scrollbar-y-rail */
width: 8px; width: 8px;
@ -45,6 +51,10 @@
transition: background-color .2s linear, opacity .2s linear; transition: background-color .2s linear, opacity .2s linear;
} }
.ps-container.ps-active-y>.ps-scrollbar-y-rail {
display: block;
}
.ps-container:hover>.ps-scrollbar-y-rail { .ps-container:hover>.ps-scrollbar-y-rail {
opacity: 0.6; opacity: 0.6;
filter: alpha(opacity=60); filter: alpha(opacity=60);

17
src/perfect-scrollbar.js
View File

@ -198,8 +198,8 @@
function updateGeometry() { function updateGeometry() {
// Hide scrollbars not to affect scrollWidth and scrollHeight // Hide scrollbars not to affect scrollWidth and scrollHeight
$scrollbarXRail.hide(); $this.removeClass('ps-active-x');
$scrollbarYRail.hide(); $this.removeClass('ps-active-y');
containerWidth = settings.includePadding ? $this.innerWidth() : $this.width(); containerWidth = settings.includePadding ? $this.innerWidth() : $this.width();
containerHeight = settings.includePadding ? $this.innerHeight() : $this.height(); containerHeight = settings.includePadding ? $this.innerHeight() : $this.height();
@ -239,22 +239,9 @@
if (scrollbarXActive) { if (scrollbarXActive) {
$this.addClass('ps-active-x'); $this.addClass('ps-active-x');
} else {
$this.removeClass('ps-active-x');
} }
if (scrollbarYActive) { if (scrollbarYActive) {
$this.addClass('ps-active-y'); $this.addClass('ps-active-y');
} else {
$this.removeClass('ps-active-y');
}
// Show scrollbars if needed after updated
if (!settings.suppressScrollX) {
$scrollbarXRail.show();
}
if (!settings.suppressScrollY) {
$scrollbarYRail.show();
} }
} }