0

だから私は次のようなdivを持っていて、<div id="scroller">...</div>このdivの中にはたくさんのコンテンツがあり、オーバーフローは非表示に設定されています。

スムーズにスクロールする垂直方向のdivを作成しようとしています。divの上部にid='up'ボタンがあり、下部にボタンがありますid='down'。

今、上ボタンまたは下ボタンをクリックすると、divがスクロールしますが、約1行または2行（各クリック）しかありません。

マウスを押している間、この関数を継続的にスクロールするようにこの関数をバインドする方法を誰かに説明してもらえますか？また、スムーズなスクロールというよりは、上下のクリックのように感じます。

scrollTop（）ではなく使用する必要のある別の関数はありますか？

ここにフィドルがあります

これに関するどんな助けも素晴らしいでしょう！前もって感謝します。

$(document).ready(function() {
    var timeoutId = 0;

function scrollIt(amount){
    $('#scroller').scrollTop($('#scroller').scrollTop()+amount);
}

$('#down').mousedown(function() {
    timeoutId = setTimeout(scrollIt(5), 1000);
}).bind('mouseleave', function() {
    clearTimeout(timeoutId);
});

$('#up').mousedown(function() {
    timeoutId = setTimeout(scrollIt(-5), 1000);
}).bind('mouseleave', function() {
    clearTimeout(timeoutId);
});
});

実用的なソリューション

$(document).ready(function() {
    var timeoutId = 0;

    function scrollIt(amount){
$('#scroller').scrollTop($('#scroller').scrollTop()+amount);
}

$('#down').mousedown(function() {
    timeoutId = setInterval(function(){scrollIt(5)}, 20);
}).bind('mouseup mouseleave', function() {
    clearInterval(timeoutId);
});

$('#up').mousedown(function() {
    timeoutId = setInterval(function(){scrollIt(-5)}, 20);
}).bind('mouseup mouseleave', function() {
    clearInterval(timeoutId);
});
});

HTML

<div class="scrollup" id="up">&nbsp;</div> 

 <div id="scroller" class="scroller buttongroup">  
    blah blah
    content blah
    blah blah
    content blah
</div>

<div class="scrolldown" id="down">&nbsp;</div>
4

1 に答える 1

1

2つの問題があります。

  1. onmousedownイベントは、繰り返しではなく1回だけ発生するため、への1回の呼び出しはsetTimeout1回だけ発生します。解決策は、setInterval（およびclearIntervalそれぞれ）を使用して、間隔がクリアされるまでメソッドを繰り返し呼び出すことです。

  2. setTimeout/の最初のパラメーターsetIntervalは関数でなければなりません。実際には、の戻り値を渡していscrollIt(5)ますundefined。実際の関数自体、つまり単にを渡す必要がありますscrollIt。もちろん、5を加算するか、5を減算するかを判断できないという問題が残ります。これは、呼び出しを無名関数でラップして渡すだけで解決できます。

    setInterval(function(){ scrollIt(5) }, 1000)

また、1000ミリ秒は、スクロールなどの非常に遅い間隔です。これを約250にノックダウンする必要があります。これは、これらすべての変更が有効になっている更新されたフィドルです。

于 2012-08-02T17:46:44.513 に答える