jQuery-帶按鈕的垂直div滾動不會連續滾動

所以我有一個看起來像<div id="scroller">...</div>的div，並且這個div內部是一堆內容，溢出被設置爲隱藏。jQuery-帶按鈕的垂直div滾動不會連續滾動

我試圖做一個平滑的滾動垂直div。我在div id='up'頂部有一個按鈕，底部有一個按鈕id='down'。

現在，當我點擊向上或向下按鈕div將滾動，但只有約1或2行（每次點擊）。

有人可以請我解釋一下如何綁定這個函數，讓它在鼠標按下時不斷滾動？此外，感覺更像是一個點擊上/下而不是平滑滾動。

是否有不同的函數，我應該使用，而不是scrollTop（）？

繼承人FIDDLE

任何幫助，這將是巨大的！在此先感謝。

$(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>

來源

2012-08-02 xxstevenxo

你有兩個問題：

的onmousedown事件事件僅觸發一次，而不是代表因此只需撥打一次電話setTimeout即可。解決的辦法是（分別爲和clearInterval）使用setInterval有方法被反覆調用，直到間隔被清除
的第一個參數setTimeout/setInterval必須是一個函數。您實際上傳遞的是scrollIt(5)的返回值，即undefined。你必須通過實際的功能本身，即只有scrollIt。這當然是留給你不能夠告訴它是否加5或減5，你能解決的問題，通過簡單地包裹在匿名函數調用，並傳遞一個：
```
setInterval(function(){ scrollIt(5) }, 1000) 
```

而且，1000毫秒是非常慢像滾動一樣的緩慢時間間隔。你需要把它降低到250左右。這是更新後的fiddle，所有這些變化都有效。

來源

2012-08-02 17:46:44

太棒了！這正是我的錯誤所在。非常感謝您的幫助。 – xxstevenxo 2012-08-02 17:53:42

我刪除了1000，並且將ammount'scrollIt（5）'切換到scrollIt（1）並且獲得了我正在尋找的速度。感謝您的更新。 – xxstevenxo 2012-08-02 17:56:44

jQuery-帶按鈕的垂直div滾動不會連續滾動

回答

相關問題