Как прокручивать div непрерывно на событии mousedown? - PullRequest
Новая
       12

Как прокручивать div непрерывно на событии mousedown?

9 голосов
/ 03 октября 2009

У меня есть два деления и две кнопки: 

<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 только один раз. Я хочу добиться непрерывной анимации, пока кнопка не будет отпущена. Спасибо за вашу помощь!

Ответы [ 2 ]

14 голосов
/ 03 октября 2009

Пожалуйста, попробуйте это: 

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);
        }
    });
}
0 голосов
/ 22 апреля 2018

Я улучшил скрипку @ 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/

...