How to scroll div continuously on mousedown event?

问题:

I have two divs and two buttons:

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

How to continuously scroll '#items' until user releases the button? I tried using jquery mousedown event and animate function but couldn't make it to work.

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

The code above moves the div just once. I want to achieve continuous animation until the button is released. Thanks for your help!

回答1:

Please, try this:

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);
        }
    });
}

回答2:

I've improved @jesse-dupuy's fiddle. I've added the 'linear' easing to the animation so the scroll is smooth and moved the .on('mouseup') event from the button to the document so it doesn't matter where the user releases the mouse button.

$(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>

My fork on JSFiddle: https://jsfiddle.net/ferares/9mw598hd/7/