72 lines
1.8 KiB
JavaScript
72 lines
1.8 KiB
JavaScript
|
// JavaScript Document
|
||
|
|
|
||
|
|
$(document).ready(function(){
|
||
|
|
|
||
|
|
$('.visible-area').each(function(){
|
||
|
|
var $frame = $(this);
|
||
|
|
var $content = $(this).children('.inner');
|
||
|
|
|
||
|
|
if($frame.height() < $content.innerHeight()) {
|
||
|
|
|
||
|
|
var $scrollArea = $('<div class="scroll-bar"></div>');
|
||
|
|
var $scroll = $('<div class="scroll"></div>');
|
||
|
|
|
||
|
|
$scroll.appendTo($scrollArea);
|
||
|
|
$frame.append($scrollArea);
|
||
|
|
|
||
|
|
var $isDown = false;
|
||
|
|
var $dY = 0;
|
||
|
|
var $kY = ($content.height() - $frame.height() + 16) / ($scrollArea.height() - $scroll.height());
|
||
|
|
|
||
|
|
$scrollArea.css({'display' : 'block'});
|
||
|
|
$scroll.bind('dragstart', false);
|
||
|
|
|
||
|
|
$content.css({'position' : 'absolute', 'top' : 0, 'padding-right' : '20px'});
|
||
|
|
|
||
|
|
function checkOutLine() {
|
||
|
|
|
||
|
|
if($scroll.offset().top < $scrollArea.offset().top) {
|
||
|
|
$scroll.offset({top : $scrollArea.offset().top});
|
||
|
|
}
|
||
|
|
|
||
|
|
if(($scroll.offset().top + $scroll.height()) > ($scrollArea.offset().top + $scrollArea.height())) {
|
||
|
|
$scroll.offset({ top : ($scrollArea.offset().top + $scrollArea.height() - $scroll.height())});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function moveContent() {
|
||
|
|
var $y = -($kY * ($scroll.offset().top - $scrollArea.offset().top));
|
||
|
|
$content.css({'top' : $y});
|
||
|
|
}
|
||
|
|
|
||
|
|
$scroll.mousedown(function(event){
|
||
|
|
$isDown = true;
|
||
|
|
|
||
|
|
$dY = event.pageY - $(this).offset().top;
|
||
|
|
});
|
||
|
|
|
||
|
|
$(document).mouseup(function(){
|
||
|
|
$isDown = false;
|
||
|
|
});
|
||
|
|
|
||
|
|
$(document).mousemove(function(event){
|
||
|
|
if($isDown) {
|
||
|
|
$scroll.offset({top : event.pageY - $dY});
|
||
|
|
checkOutLine();
|
||
|
|
moveContent();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$scrollArea.click(function(event){
|
||
|
|
if($isDown == false) {
|
||
|
|
$scroll.offset({top : event.pageY - $dY});
|
||
|
|
checkOutLine();
|
||
|
|
moveContent();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$dY = 0;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|