Implement visible rail feature.
Now the scrollbars are wrapped by rail elements, and the styles and scripts are heavily changed to implement the feature.
This commit is contained in:
Hyunje Alex Jun
parent
8ea7291469
commit
51db8add43
@ -1,75 +1,111 @@
|
||||
.ps-container .ps-scrollbar-x {
|
||||
.ps-container .ps-scrollbar-x-rail {
|
||||
position: absolute; /* please don't change 'position' */
|
||||
bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x */
|
||||
bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x-rail */
|
||||
height: 8px;
|
||||
background-color: #aaa;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity = 0);
|
||||
-o-transition: opacity .2s linear;
|
||||
-webkit-transition: opacity.2s linear;
|
||||
-moz-transition: opacity .2s linear;
|
||||
transition: opacity .2s linear;
|
||||
-o-transition: background-color .2s linear, opacity .2s linear;
|
||||
-webkit-transition: background-color.2s linear, opacity .2s linear;
|
||||
-moz-transition: background-color .2s linear, opacity .2s linear;
|
||||
transition: background-color .2s linear, opacity .2s linear;
|
||||
}
|
||||
|
||||
.ps-container:hover .ps-scrollbar-x-rail,
|
||||
.ps-container.hover .ps-scrollbar-x-rail {
|
||||
opacity: 0.6;
|
||||
filter: alpha(opacity = 60);
|
||||
}
|
||||
|
||||
.ps-container .ps-scrollbar-x-rail:hover,
|
||||
.ps-container .ps-scrollbar-x-rail.hover {
|
||||
background-color: #eee;
|
||||
opacity: 0.9;
|
||||
filter: alpha(opacity = 90);
|
||||
}
|
||||
|
||||
.ps-container .ps-scrollbar-x-rail.in-scrolling {
|
||||
opacity: 0.9;
|
||||
filter: alpha(opacity = 90);
|
||||
}
|
||||
|
||||
.ps-container .ps-scrollbar-y-rail {
|
||||
position: absolute; /* please don't change 'position' */
|
||||
right: 3px; /* there must be 'right' for ps-scrollbar-y-rail */
|
||||
width: 8px;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity = 0);
|
||||
-o-transition: background-color .2s linear, opacity .2s linear;
|
||||
-webkit-transition: background-color.2s linear, opacity .2s linear;
|
||||
-moz-transition: background-color .2s linear, opacity .2s linear;
|
||||
transition: background-color .2s linear, opacity .2s linear;
|
||||
}
|
||||
|
||||
.ps-container:hover .ps-scrollbar-y-rail,
|
||||
.ps-container.hover .ps-scrollbar-y-rail {
|
||||
opacity: 0.6;
|
||||
filter: alpha(opacity = 60);
|
||||
}
|
||||
|
||||
.ps-container .ps-scrollbar-y-rail:hover,
|
||||
.ps-container .ps-scrollbar-y-rail.hover {
|
||||
background-color: #eee;
|
||||
opacity: 0.9;
|
||||
filter: alpha(opacity = 90);
|
||||
}
|
||||
|
||||
.ps-container .ps-scrollbar-y-rail.in-scrolling {
|
||||
opacity: 0.9;
|
||||
filter: alpha(opacity = 90);
|
||||
}
|
||||
|
||||
.ps-container .ps-scrollbar-x {
|
||||
position: absolute; /* please don't change 'position' */
|
||||
bottom: 0; /* there must be 'bottom' for ps-scrollbar-x */
|
||||
height: 8px;
|
||||
background-color: #aaa;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-o-transition: background-color .2s linear;
|
||||
-webkit-transition: background-color.2s linear;
|
||||
-moz-transition: background-color .2s linear;
|
||||
transition: background-color .2s linear;
|
||||
}
|
||||
|
||||
.ps-container.ie6 .ps-scrollbar-x {
|
||||
font-size: 0; /* fixed scrollbar height in xp sp3 ie6 */
|
||||
}
|
||||
|
||||
.ps-container:hover .ps-scrollbar-x,
|
||||
.ps-container.hover .ps-scrollbar-x {
|
||||
opacity: 0.6;
|
||||
filter: alpha(opacity = 60);
|
||||
}
|
||||
|
||||
.ps-container .ps-scrollbar-x:hover,
|
||||
.ps-container .ps-scrollbar-x.hover {
|
||||
opacity: 0.9;
|
||||
filter: alpha(opacity = 90);
|
||||
cursor:default;
|
||||
}
|
||||
|
||||
.ps-container .ps-scrollbar-x.in-scrolling {
|
||||
opacity: 0.9;
|
||||
filter: alpha(opacity = 90);
|
||||
.ps-container .ps-scrollbar-x-rail:hover .ps-scrollbar-x,
|
||||
.ps-container .ps-scrollbar-x-rail.hover .ps-scrollbar-x {
|
||||
background-color: #999;
|
||||
}
|
||||
|
||||
.ps-container .ps-scrollbar-y {
|
||||
position: absolute; /* please don't change 'position' */
|
||||
right: 3px; /* there must be 'right' for ps-scrollbar-y */
|
||||
right: 0; /* there must be 'right' for ps-scrollbar-y */
|
||||
width: 8px;
|
||||
background-color: #aaa;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity = 0);
|
||||
-o-transition: opacity .2s linear;
|
||||
-webkit-transition: opacity.2s linear;
|
||||
-moz-transition: opacity .2s linear;
|
||||
transition: opacity .2s linear;
|
||||
-o-transition: background-color .2s linear;
|
||||
-webkit-transition: background-color.2s linear;
|
||||
-moz-transition: background-color .2s linear;
|
||||
transition: background-color .2s linear;
|
||||
}
|
||||
|
||||
.ps-container.ie .ps-scrollbar-y {
|
||||
font-size: 0; /* fixed scrollbar height in xp sp3 ie6 */
|
||||
}
|
||||
|
||||
.ps-container:hover .ps-scrollbar-y,
|
||||
.ps-container.hover .ps-scrollbar-y {
|
||||
opacity: 0.6;
|
||||
filter: alpha(opacity = 60);
|
||||
}
|
||||
|
||||
.ps-container .ps-scrollbar-y:hover,
|
||||
.ps-container .ps-scrollbar-y.hover {
|
||||
opacity: 0.9;
|
||||
filter: alpha(opacity = 90);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.ps-container .ps-scrollbar-y.in-scrolling {
|
||||
opacity: 0.9;
|
||||
filter: alpha(opacity = 90);
|
||||
.ps-container .ps-scrollbar-y-rail:hover .ps-scrollbar-y,
|
||||
.ps-container .ps-scrollbar-y-rail.hover .ps-scrollbar-y {
|
||||
background-color: #999;
|
||||
}
|
||||
|
||||
@ -62,8 +62,10 @@
|
||||
// Set class to the container
|
||||
$this.addClass('ps-container');
|
||||
|
||||
var $scrollbarX = $("<div class='ps-scrollbar-x'></div>").appendTo($this),
|
||||
$scrollbarY = $("<div class='ps-scrollbar-y'></div>").appendTo($this),
|
||||
var $scrollbarXRail = $("<div class='ps-scrollbar-x-rail'></div>").appendTo($this),
|
||||
$scrollbarYRail = $("<div class='ps-scrollbar-y-rail'></div>").appendTo($this),
|
||||
$scrollbarX = $("<div class='ps-scrollbar-x'></div>").appendTo($scrollbarXRail),
|
||||
$scrollbarY = $("<div class='ps-scrollbar-y'></div>").appendTo($scrollbarYRail),
|
||||
scrollbarXActive,
|
||||
scrollbarYActive,
|
||||
containerWidth,
|
||||
@ -72,21 +74,21 @@
|
||||
contentHeight,
|
||||
scrollbarXWidth,
|
||||
scrollbarXLeft,
|
||||
scrollbarXBottom = parseInt($scrollbarX.css('bottom'), 10),
|
||||
scrollbarXBottom = parseInt($scrollbarXRail.css('bottom'), 10),
|
||||
scrollbarYHeight,
|
||||
scrollbarYTop,
|
||||
scrollbarYRight = parseInt($scrollbarY.css('right'), 10);
|
||||
scrollbarYRight = parseInt($scrollbarYRail.css('right'), 10);
|
||||
|
||||
var updateContentScrollTop = function () {
|
||||
var scrollTop = parseInt(scrollbarYTop * (contentHeight - containerHeight) / (containerHeight - scrollbarYHeight), 10);
|
||||
$this.scrollTop(scrollTop);
|
||||
$scrollbarX.css({bottom: scrollbarXBottom - scrollTop});
|
||||
$scrollbarXRail.css({bottom: scrollbarXBottom - scrollTop});
|
||||
};
|
||||
|
||||
var updateContentScrollLeft = function () {
|
||||
var scrollLeft = parseInt(scrollbarXLeft * (contentWidth - containerWidth) / (containerWidth - scrollbarXWidth), 10);
|
||||
$this.scrollLeft(scrollLeft);
|
||||
$scrollbarY.css({right: scrollbarYRight - scrollLeft});
|
||||
$scrollbarYRail.css({right: scrollbarYRight - scrollLeft});
|
||||
};
|
||||
|
||||
var getSettingsAdjustedThumbSize = function (thumbSize) {
|
||||
@ -97,8 +99,10 @@
|
||||
};
|
||||
|
||||
var updateScrollbarCss = function () {
|
||||
$scrollbarX.css({left: scrollbarXLeft + $this.scrollLeft(), bottom: scrollbarXBottom - $this.scrollTop(), width: scrollbarXWidth});
|
||||
$scrollbarY.css({top: scrollbarYTop + $this.scrollTop(), right: scrollbarYRight - $this.scrollLeft(), height: scrollbarYHeight});
|
||||
$scrollbarXRail.css({left: $this.scrollLeft(), bottom: scrollbarXBottom - $this.scrollTop(), width: containerWidth});
|
||||
$scrollbarYRail.css({top: $this.scrollTop(), right: scrollbarYRight - $this.scrollLeft(), height: containerHeight});
|
||||
$scrollbarX.css({left: scrollbarXLeft, width: scrollbarXWidth});
|
||||
$scrollbarY.css({top: scrollbarYTop, height: scrollbarYHeight});
|
||||
};
|
||||
|
||||
var updateBarSizeAndPosition = function () {
|
||||
@ -154,7 +158,8 @@
|
||||
else {
|
||||
scrollbarXLeft = newLeft;
|
||||
}
|
||||
$scrollbarX.css({left: scrollbarXLeft + $this.scrollLeft()});
|
||||
$scrollbarXRail.css({left: $this.scrollLeft()});
|
||||
$scrollbarX.css({left: scrollbarXLeft});
|
||||
};
|
||||
|
||||
var moveBarY = function (currentTop, deltaY) {
|
||||
@ -170,7 +175,8 @@
|
||||
else {
|
||||
scrollbarYTop = newTop;
|
||||
}
|
||||
$scrollbarY.css({top: scrollbarYTop + $this.scrollTop()});
|
||||
$scrollbarYRail.css({top: $this.scrollTop()});
|
||||
$scrollbarY.css({top: scrollbarYTop});
|
||||
};
|
||||
|
||||
var bindMouseScrollXHandler = function () {
|
||||
@ -180,13 +186,13 @@
|
||||
$scrollbarX.bind('mousedown.perfect-scrollbar', function (e) {
|
||||
currentPageX = e.pageX;
|
||||
currentLeft = $scrollbarX.position().left;
|
||||
$scrollbarX.addClass('in-scrolling');
|
||||
$scrollbarXRail.addClass('in-scrolling');
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
$(document).bind('mousemove.perfect-scrollbar', function (e) {
|
||||
if ($scrollbarX.hasClass('in-scrolling')) {
|
||||
if ($scrollbarXRail.hasClass('in-scrolling')) {
|
||||
updateContentScrollLeft();
|
||||
moveBarX(currentLeft, e.pageX - currentPageX);
|
||||
e.stopPropagation();
|
||||
@ -195,8 +201,8 @@
|
||||
});
|
||||
|
||||
$(document).bind('mouseup.perfect-scrollbar', function (e) {
|
||||
if ($scrollbarX.hasClass('in-scrolling')) {
|
||||
$scrollbarX.removeClass('in-scrolling');
|
||||
if ($scrollbarXRail.hasClass('in-scrolling')) {
|
||||
$scrollbarXRail.removeClass('in-scrolling');
|
||||
}
|
||||
});
|
||||
|
||||
@ -211,13 +217,13 @@
|
||||
$scrollbarY.bind('mousedown.perfect-scrollbar', function (e) {
|
||||
currentPageY = e.pageY;
|
||||
currentTop = $scrollbarY.position().top;
|
||||
$scrollbarY.addClass('in-scrolling');
|
||||
$scrollbarYRail.addClass('in-scrolling');
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
$(document).bind('mousemove.perfect-scrollbar', function (e) {
|
||||
if ($scrollbarY.hasClass('in-scrolling')) {
|
||||
if ($scrollbarYRail.hasClass('in-scrolling')) {
|
||||
updateContentScrollTop();
|
||||
moveBarY(currentTop, e.pageY - currentPageY);
|
||||
e.stopPropagation();
|
||||
@ -226,8 +232,8 @@
|
||||
});
|
||||
|
||||
$(document).bind('mouseup.perfect-scrollbar', function (e) {
|
||||
if ($scrollbarY.hasClass('in-scrolling')) {
|
||||
$scrollbarY.removeClass('in-scrolling');
|
||||
if ($scrollbarYRail.hasClass('in-scrolling')) {
|
||||
$scrollbarYRail.removeClass('in-scrolling');
|
||||
}
|
||||
});
|
||||
|
||||
@ -449,6 +455,8 @@
|
||||
$this.data('perfect-scrollbar-destroy', null);
|
||||
$scrollbarX.remove();
|
||||
$scrollbarY.remove();
|
||||
$scrollbarXRail.remove();
|
||||
$scrollbarYRail.remove();
|
||||
|
||||
// clean all variables
|
||||
$scrollbarX =
|
||||
@ -476,6 +484,8 @@
|
||||
$(this).removeClass('hover');
|
||||
};
|
||||
$this.bind('mouseenter.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
|
||||
$scrollbarXRail.bind('mouseenter.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
|
||||
$scrollbarYRail.bind('mouseenter.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
|
||||
$scrollbarX.bind('mouseenter.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
|
||||
$scrollbarY.bind('mouseenter.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user