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

Posted 2023-05-08

【中文标题】如何在 mousedown 事件上连续滚动 div？

【英文标题】：How to scroll div continuously on mousedown event?

【发布时间】：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 一次。我想实现连续动画，直到按钮被释放。感谢您的帮助！

【参考方案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/