Add y-axis scroll function.
This commit is contained in:
parent
ca22fedf65
commit
efe6727e5d
1
min/perfect-scrollbar.min.css
vendored
Normal file
1
min/perfect-scrollbar.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
.ps-container .ps-scrollbar-y{position:absolute;width:10px;right:5px;background-color:gray}.ps-container .ps-scrollbar-y:hover{background-color:#000;cursor:default}.ps-container .ps-scrollbar-y.in-scrolling{background-color:#000}
|
2
min/perfect-scrollbar.min.js
vendored
2
min/perfect-scrollbar.min.js
vendored
@ -1,3 +1,3 @@
|
||||
/* Copyright (c) 2012 HyeonJe Jun (http://github.com/noraesae)
|
||||
* Licensed under the MIT License
|
||||
*/(function(e){e.fn.perfectScrollbar=function(){e(this).mousewheel(function(t,n,r,i){e(this).scrollTop(e(this).scrollTop()-i*10),e(this).scrollLeft(e(this).scrollLeft()+r*10),t.preventDefault()})}})(jQuery);
|
||||
*/(function(e){e.fn.perfectScrollbar=function(){var t=e(this),n=e(this).children(),r=e("<div class='ps-scrollbar-y'></div>").appendTo(t),i,s,o,u;t.addClass("ps-container");var a=function(){t.scrollTop(parseInt(u*s/i))},f=function(){i=t.height(),s=n.height(),o=parseInt(i*i/s),u=parseInt(t.scrollTop()*i/s),r.css({top:u+t.scrollTop(),height:o})},l=function(e,n){var s=e+n,a=i-o;s<0?u=0:s>a?u=a:u=s,r.css({top:u+t.scrollTop()})},c=function(){var t,n;r.bind("mousedown.perfect-scroll",function(e){n=e.pageY,t=r.position().top,r.addClass("in-scrolling"),e.stopPropagation(),e.preventDefault()}),e(window).bind("mousemove.perfect-scroll",function(e){r.hasClass("in-scrolling")&&(l(t,e.pageY-n),a(),e.stopPropagation(),e.preventDefault())}),e(window).bind("mouseup.perfect-scroll",function(e){r.hasClass("in-scrolling")&&r.removeClass("in-scrolling")})},h=function(){t.mousewheel(function(e,n,r,i){t.scrollTop(t.scrollTop()-i*10),t.scrollLeft(t.scrollLeft()+r*10),f(),e.preventDefault()})};return f(),c(),t.mousewheel&&h(),t}})(jQuery);
|
15
src/perfect-scrollbar.css
Normal file
15
src/perfect-scrollbar.css
Normal file
@ -0,0 +1,15 @@
|
||||
.ps-container .ps-scrollbar-y {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
right: 5px;
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
.ps-container .ps-scrollbar-y:hover {
|
||||
background-color: black;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.ps-container .ps-scrollbar-y.in-scrolling {
|
||||
background-color: black;
|
||||
}
|
@ -3,10 +3,92 @@
|
||||
*/
|
||||
((function($) {
|
||||
$.fn.perfectScrollbar = function() {
|
||||
$(this).mousewheel(function(e, delta, deltaX, deltaY) {
|
||||
$(this).scrollTop($(this).scrollTop() - (deltaY * 10));
|
||||
$(this).scrollLeft($(this).scrollLeft() + (deltaX * 10));
|
||||
e.preventDefault();
|
||||
});
|
||||
var $this = $(this),
|
||||
$content = $(this).children(),
|
||||
$scrollbar_y = $("<div class='ps-scrollbar-y'></div>").appendTo($this),
|
||||
container_height,
|
||||
content_height,
|
||||
scrollbar_y_height,
|
||||
scrollbar_y_top;
|
||||
|
||||
// add class
|
||||
$this.addClass('ps-container');
|
||||
|
||||
var updateContentScrollTop = function() {
|
||||
$this.scrollTop(parseInt(scrollbar_y_top * content_height / container_height));
|
||||
};
|
||||
|
||||
var updateBarSizeAndPosition = function() {
|
||||
container_height = $this.height();
|
||||
content_height = $content.height();
|
||||
scrollbar_y_height = parseInt(container_height * container_height / content_height);
|
||||
scrollbar_y_top = parseInt($this.scrollTop() * container_height / content_height);
|
||||
|
||||
$scrollbar_y.css({top: scrollbar_y_top + $this.scrollTop(), height: scrollbar_y_height});
|
||||
};
|
||||
|
||||
var moveBarY = function(current_top, delta_y) {
|
||||
var new_top = current_top + delta_y,
|
||||
max_top = container_height - scrollbar_y_height;
|
||||
|
||||
if(new_top < 0) {
|
||||
scrollbar_y_top = 0;
|
||||
}
|
||||
else if(new_top > max_top) {
|
||||
scrollbar_y_top = max_top;
|
||||
}
|
||||
else {
|
||||
scrollbar_y_top = new_top;
|
||||
}
|
||||
$scrollbar_y.css({top: scrollbar_y_top + $this.scrollTop()});
|
||||
};
|
||||
|
||||
var bindMouseScrollYHandler = function() {
|
||||
var current_top,
|
||||
current_page_y;
|
||||
|
||||
$scrollbar_y.bind('mousedown.perfect-scroll', function(e) {
|
||||
current_page_y = e.pageY;
|
||||
current_top = $scrollbar_y.position().top;
|
||||
$scrollbar_y.addClass('in-scrolling');
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
$(window).bind('mousemove.perfect-scroll', function(e) {
|
||||
if($scrollbar_y.hasClass('in-scrolling')) {
|
||||
moveBarY(current_top, e.pageY - current_page_y);
|
||||
updateContentScrollTop();
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
$(window).bind('mouseup.perfect-scroll', function(e) {
|
||||
if($scrollbar_y.hasClass('in-scrolling')) {
|
||||
$scrollbar_y.removeClass('in-scrolling');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// bind handlers
|
||||
var bindMouseWheelHandler = function() {
|
||||
$this.mousewheel(function(e, delta, deltaX, deltaY) {
|
||||
$this.scrollTop($this.scrollTop() - (deltaY * 10));
|
||||
$this.scrollLeft($this.scrollLeft() + (deltaX * 10));
|
||||
|
||||
// update bar position
|
||||
updateBarSizeAndPosition();
|
||||
|
||||
e.preventDefault();
|
||||
});
|
||||
};
|
||||
|
||||
// initialize
|
||||
updateBarSizeAndPosition();
|
||||
bindMouseScrollYHandler();
|
||||
if($this.mousewheel) bindMouseWheelHandler();
|
||||
|
||||
return $this;
|
||||
};
|
||||
})(jQuery));
|
||||
|
Loading…
Reference in New Issue
Block a user