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

你有两个问题：

  1. onmousedown 事件只会触发一次，不会重复触发，因此一次调用setTimeout只会发生一次。解决方案是使用setInterval（和clearInterval分别）重复调用该方法，直到清除间隔

  2. setTimeout/的第一个参数setInterval必须是函数。您实际上是在传递 is 的返回scrollIt(5)值undefined。您必须传递实际函数本身，即scrollIt. 这当然会给您带来无法告诉它是加 5 还是减 5 的问题。您可以通过简单地将调用包装在匿名函数中并传递它来解决这个问题：

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

此外，对于滚动等操作来说，1000 毫秒是一个非常慢的间隔。你需要把它降低到大约 250。这是一个更新的小提琴，所有这些变化都生效了。

于 2012-08-02T17:46:44.513 回答