Wie man div kontinuierlich auf Mousedown-Ereignis blättern?

Question

Ich habe zwei Divs und zwei Schaltflächen:

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

Wie scrollt man kontinuierlich '#items', bis der Benutzer die Schaltfläche loslässt? Ich habe versucht, mit Jquery Mousedown-Ereignis und Animate-Funktion, aber konnte nicht machen es zu arbeiten.

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

Der obige Code verschiebt das Div nur einmal. Ich möchte eine kontinuierliche Animation erreichen, bis die Schaltfläche losgelassen wird. Vielen Dank für Ihre Hilfe!

Answer 1

Bitte, versuchen Sie dies:

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

Answer 2

Ich habe die Geige von @jesse-dupuy verbessert. Ich habe die "lineare" Lockerung der Animation hinzugefügt, so dass der Bildlauf glatt ist und das .on('mouseup')-Ereignis von der Schaltfläche zum Dokument verschoben, so dass es keine Rolle spielt, wo der Benutzer die Maustaste loslässt.

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

Meine Abzweigung zu JSFiddle: https://jsfiddle.net/ferares/9mw598hd/7/