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滚动不会连续滚动

回答

相关问题