如何在 mousedown 事件上连续滚动 div？答案

【问题标题】：How to scroll div continuously on mousedown event?如何在 mousedown 事件上连续滚动 div？
【发布时间】：2010-12-03 10:46:46
【问题描述】：

我有两个 div 和两个按钮：

<div id="container">
    <div id="items"></div>
</div>
<div id="up"></div>
<div id="down"></div>

如何连续滚动“#items”直到用户释放按钮？我尝试使用 jquery mousedown 事件和动画功能，但无法使其工作。

$("#up").mousedown(function(){
$("#items").animate({"top": "+=10px"}, "fast");
})

上面的代码只移动了 div 一次。我想实现连续动画，直到按钮被释放。感谢您的帮助！

【问题讨论】：

标签： jquery scroll jquery-animate

【解决方案1】：

请试试这个：

var scrolling = false;

jQuery(function($){
    $("#up").mousedown(function(){
        scrolling = true;
        startScrolling($("#items"), "-=10px");
    }).mouseup(function(){
        scrolling = false;
    });
});

function startScrolling(obj, param)
{
    obj.animate({"top": param}, "fast", function(){
        if (scrolling)
        {
            startScrolling(obj, param);
        }
    });
}

【讨论】：

这有效，除非你会得到一个 js 错误，即 obj.animate 不是 mouseup 上的函数。执行此操作并避免 js 错误的一种更简洁的方法是： if (!scrolling) { obj.stop(); } else { obj.animate({"top": param}, "fast", function(){ if (scrolling) { startScrolling(obj, param); } }); }
我制作了一个fiddle，其中包含@fedosov 的回答和马克的额外输入，以及我自己的一些修改：D
@JesseDupuy 一个按钮如何向上滚动，另一个向下滚动？看起来你只是教他们向下滚动！
这种实现在 Firefox 中总是导致“Err: too much recursion”。

【解决方案2】：

我改进了@jesse-dupuy 的小提琴。我在动画中添加了“线性”缓动，因此滚动平滑，并将 .on('mouseup') 事件从按钮移动到文档，因此用户释放鼠标按钮的位置无关紧要。

$(function () {
    // use UI arrows in page content to control scrolling
    var scrolling = false;

    $('.scroll-arrows').on('mousedown', 'div', function (evt) {
        scrolling = true;
        startScrolling($('.scroll-box'), 100, evt.target.id);
    });
    
    $(document).mouseup(function () {
      scrolling = false;
    });

    function startScrolling(obj, spd, btn) {
        var travel = (btn.indexOf('up') > -1) ? '-=' + spd + 'px' : '+=' + spd + 'px';
        if (!scrolling) {
            obj.stop();
        } else {
            // recursively call startScrolling while mouse is pressed
            obj.animate({
                "scrollTop": travel
            }, "fast", "linear", function () {
              startScrolling(obj, spd, btn);
            });
        }
    }
});

.scroll-box {
    max-height: 300px;
    overflow-y: scroll;
    border: 2px solid #000;
    margin-bottom: 20px;
}
.scroll-box .overflow {
    height: 1000px;
    background: #d0e4f7;
    background: url(data:image/svg+xml;
    base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QwZTRmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI0JSIgc3RvcC1jb2xvcj0iIzczYjFlNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzBhNzdkNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc5JSIgc3RvcC1jb2xvcj0iIzUzOWZlMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4N2JjZWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d0e4f7), color-stop(24%, #73b1e7), color-stop(50%, #0a77d5), color-stop(79%, #539fe1), color-stop(100%, #87bcea));
    background: -webkit-linear-gradient(top, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%);
    background: -o-linear-gradient(top, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%);
    background: -ms-linear-gradient(top, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%);
    background: linear-gradient(to bottom, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0e4f7', endColorstr='#87bcea', GradientType=0);
}
.scroll-arrows {
    text-align: center;
}
.scroll-arrows div {
    display: inline-block;
    width: 40%;
    padding: 20px;
    cursor: pointer;
    color: #fff;
    background: #00f;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroll-box">
    <div class="overflow">Tons of content in here...</div>
</div>
<div class="scroll-arrows">
    <div id="arrow-up">Scroll Up</div>
    <div id="arrow-down">Scroll Down</div>
</div>

我在 JSFiddle 上的分叉：https://jsfiddle.net/ferares/9mw598hd/7/

【讨论】：