Toggle navigation
Document
Download
Ex Scroll
:: jQuery Utility Kit
$( contents ).exScroll();
Scroll X
Scroll Y
Scroll Me
status
clear
position
range
top
left
x
y
$('#scrollbox').exScroll(function(api){ //API より値を取得 var dist = api.getDirection(); //向き var timing = api.getTiming(); //タイミング var pos = api.getPosition(); //位置 var range = api.getRange(); //移動量 //グラフ表示 var graph = $('#'+dist); if(timing == 'start') graph.addClass('progress-bar-info'); if(timing == 'end') { graph.removeClass('progress-bar-info'); //ラベル位置補正 $('#scrollme').stop().animate({top:pos.top, left:pos.left}) } graph.css({width : (pos[dist] / 300 * 100)+'%'}) //ステータス表示 $('#status tbody').prepend('
'+ '
' + dist + ' scroll ' + timing + '
' + '
' + pos.top + '
' + '
' + pos.left + '
' + '
' + range.x + '
' + '
' + range.y + '
' + '
'); }); $('#clear').on('click', function(){$('#status tbody').empty()});
#scrollbox{ width:150px; height:150px; overflow:scroll; display:inline-block; position:relative; } #scrollbox div{ width:450px; height:450px; } #scrollme{ margin:32px; position:absolute; top:0; left:0; width:100px; }