jquery - 如何使用 .click() 按钮停止使用 javascript 滚动？

Question

我试图让我的画廊水平滚动，但在释放按钮时停止。我正在考虑的另一种选择是缩小画廊，以便一次只能将一张照片放入容器中，然后只需添加一个按钮即可转到下一张。现在，我该如何让它工作？该站点位于此处。

    //Scrolling 
var amount = '';

function scroll() {
    $('#photosContainer').animate({
        scrollLeft: amount
    }, 100, 'linear',function() {
        if (amount != '') {
            scroll();
        }
    });
}
$('#scrollDown').mousedown(function() {
    amount = '+=10';
    scroll();
});
$('#scrollDown').mouseup(function(){
    $(this).stop(true);
});
$('#scrollUp').mousedown(function() {
    amount = '-=10';
    scroll();
});
$('#scrollUp').mouseup(function(){
    $(this).stop(true);
});

Answer 1

问题是在mouseup功能上，您试图阻止按钮移动。但是按钮根本不动，所以脚本基本上忽略了这段代码。如果您将功能从 更改this为#photosContainer，它将停止mouseup

$('#scrollUp').mouseup(function(){
  $('#photosContainer').stop(true);
});

$('#scrollDown').mouseup(function(){
  $('#photosContainer').stop(true);
});

您也并不真正需要true那里，因为您的代码中没有任何内容与stop()设置相矛盾true

我还建议将功能更改为on(), 因为mouseup和mousedown折旧