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

Add x-axis scroll function.

Browse Source
This commit is contained in:
Hyunje Alex Jun
2012-11-09 01:32:10 +09:00
parent aba49e4286
commit 474351752d
4 changed files with 104 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/perfect-scrollbar.css
+16
View File
@@ -1,3 +1,19 @@
.ps-container .ps-scrollbar-x {
position: absolute;
height: 10px;
bottom: 5px;
background-color: gray;
}
.ps-container .ps-scrollbar-x:hover {
background-color: black;
cursor:default;
}
.ps-container .ps-scrollbar-x.in-scrolling {
background-color: black;
}
.ps-container .ps-scrollbar-y {
position: absolute;
width: 10px;
src/perfect-scrollbar.js
+86 -10
View File
@@ -3,30 +3,75 @@
*/
((function($) {
$.fn.perfectScrollbar = function() {
var $this = $(this),
var $this = $(this).addClass('ps-container'),
$content = $(this).children(),
$scrollbar_x = $("<div class='ps-scrollbar-x'></div>").appendTo($this),
$scrollbar_y = $("<div class='ps-scrollbar-y'></div>").appendTo($this),
container_width,
container_height,
content_width,
content_height,
scrollbar_x_width,
scrollbar_x_left,
scrollbar_x_bottom = parseInt($scrollbar_x.css('bottom')),
scrollbar_y_height,
scrollbar_y_top;
// add class
$this.addClass('ps-container');
scrollbar_y_top,
scrollbar_y_right = parseInt($scrollbar_y.css('right'));
var updateContentScrollTop = function() {
$this.scrollTop(parseInt(scrollbar_y_top * content_height / container_height));
var scroll_top = parseInt(scrollbar_y_top * content_height / container_height);
$this.scrollTop(scroll_top);
$scrollbar_x.css({bottom: scrollbar_x_bottom - scroll_top});
};
var updateContentScrollLeft = function() {
var scroll_left = parseInt(scrollbar_x_left * content_width / container_width);
$this.scrollLeft(scroll_left);
$scrollbar_y.css({right: scrollbar_y_right - scroll_left});
};
var updateBarSizeAndPosition = function() {
container_width = $this.width();
container_height = $this.height();
content_width = $content.width();
content_height = $content.height();
scrollbar_y_height = parseInt(container_height * container_height / content_height);
scrollbar_y_top = parseInt($this.scrollTop() * container_height / content_height);
if(container_width < content_width) {
scrollbar_x_width = parseInt(container_width * container_width / content_width);
scrollbar_x_left = parseInt($this.scrollLeft() * container_width / content_width);
}
else {
scrollbar_x_width = 0;
scrollbar_x_left = 0;
}
if(container_height < content_height) {
scrollbar_y_height = parseInt(container_height * container_height / content_height);
scrollbar_y_top = parseInt($this.scrollTop() * container_height / content_height);
}
else {
scrollbar_y_height = 0;
scrollbar_y_left = 0;
}
$scrollbar_y.css({top: scrollbar_y_top + $this.scrollTop(), height: scrollbar_y_height});
$scrollbar_x.css({left: scrollbar_x_left + $this.scrollLeft(), bottom: scrollbar_x_bottom - $this.scrollTop(), width: scrollbar_x_width});
$scrollbar_y.css({top: scrollbar_y_top + $this.scrollTop(), right: scrollbar_y_right - $this.scrollLeft(), height: scrollbar_y_height});
};
var moveBarX = function(current_left, delta_x) {
var new_left = current_left + delta_x,
max_left = container_width - scrollbar_x_width;
if(new_left < 0) {
scrollbar_x_left = 0;
}
else if(new_left > max_left) {
scrollbar_x_left = max_left;
}
else {
scrollbar_x_left = new_left;
}
$scrollbar_x.css({left: scrollbar_x_left + $this.scrollLeft()});
}
var moveBarY = function(current_top, delta_y) {
var new_top = current_top + delta_y,
max_top = container_height - scrollbar_y_height;
@@ -43,6 +88,34 @@
$scrollbar_y.css({top: scrollbar_y_top + $this.scrollTop()});
};
var bindMouseScrollXHandler = function() {
var current_left,
current_page_x;
$scrollbar_x.bind('mousedown.perfect-scroll', function(e) {
current_page_x = e.pageX;
current_left = $scrollbar_x.position().left;
$scrollbar_x.addClass('in-scrolling');
e.stopPropagation();
e.preventDefault();
});
$(window).bind('mousemove.perfect-scroll', function(e) {
if($scrollbar_x.hasClass('in-scrolling')) {
moveBarX(current_left, e.pageX - current_page_x);
updateContentScrollLeft();
e.stopPropagation();
e.preventDefault();
}
});
$(window).bind('mouseup.perfect-scroll', function(e) {
if($scrollbar_x.hasClass('in-scrolling')) {
$scrollbar_x.removeClass('in-scrolling');
}
});
};
var bindMouseScrollYHandler = function() {
var current_top,
current_page_y;
@@ -80,12 +153,15 @@
// update bar position
updateBarSizeAndPosition();
e.preventDefault();
if(content_height > container_height || content_width > container_width) {
e.preventDefault();
}
});
};
// initialize
updateBarSizeAndPosition();
bindMouseScrollXHandler();
bindMouseScrollYHandler();
if($this.mousewheel) bindMouseWheelHandler();