Change how scrollbar rails are being hidden.

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

View File

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

View File

@ -198,8 +198,8 @@
function updateGeometry() {
// Hide scrollbars not to affect scrollWidth and scrollHeight
$scrollbarXRail.hide();
$scrollbarYRail.hide();
$this.removeClass('ps-active-x');
$this.removeClass('ps-active-y');
containerWidth = settings.includePadding ? $this.innerWidth() : $this.width();
containerHeight = settings.includePadding ? $this.innerHeight() : $this.height();
@ -239,22 +239,9 @@
if (scrollbarXActive) {
$this.addClass('ps-active-x');
} else {
$this.removeClass('ps-active-x');
}
if (scrollbarYActive) {
$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();
}
}