Question

所以我有一个看起来像<div id="scroller">...</div>的div，在这个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>

Answer 1

你有两个问题：

onmousedown事件仅触发一次，而不是重复，因此对setTimeout的单次调用只会发生一次。解决方案是使用setInterval（和clearInterval分别）重复调用该方法，直到间隔被清除
setTimeout / setInterval的第一个参数必须是函数。您实际上传递的scrollIt(5)返回值为undefined。你必须传递实际的功能，即scrollIt。这当然会让你无法告诉它是否要添加5或减去5.你可以通过简单地将调用包装在匿名函数中并传递它来解决这个问题：
```
setInterval(function(){ scrollIt(5) }, 1000)
```

此外，对于类似滚动的内容，1000毫秒是非常慢的间隔。您需要将其降低到大约250.这是一个更新的fiddle，所有这些更改都有效。

jQuery-带按钮的垂直div滚动不会连续滚动

1 个答案: