Breaking News: Grepper is joining You.com. Read the official announcement!

auto scroll while dragging javascript

Raghav Tripathi answered on January 4, 2023 Popularity 5/10 Helpfulness 4/10

answer auto scroll while dragging javascript

auto scroll while dragging javascript

Comment

var stopX = true;
var stopY = true;

document.addEventListener('drag', function(e) {
    if (event.target.classList.contains('draggable')) {
        stopY = true;
                    
        // Handle Y
        if (e.clientY < 150) {
            stopY = false;
            scroll(0,-1)
        }

        if ((e.clientY > ( document.documentElement.clientHeight - 150)) && !VerticalMaxed()) { 
            stopY = false;
            scroll(0,1) 
        }
                
        // Handle X
        stopX = true;
        if (e.clientX < 150) {
            stopX = false;
            scroll(-1,0)
        }

        if ((e.clientX > ( document.documentElement.clientWidth - 150)) && !HorizontalMaxed()) { 
            stopX = false;
            scroll(1,0)
        }
    }

});

document.addEventListener('dragend', function(e) {
    if (event.target.classList.contains('draggable')) {
        stopY = true;
        //stopY = true;
        stopX = true;
    }
});

// On drag scroll, prevents page from growing with mobile safari rubber-band effect
var VerticalMaxed = function(){ return (window.innerHeight + window.scrollY) >= document.body.offsetHeight}
var HorizontalMaxed = function(){ return (window.pageXOffset) > (document.body.scrollWidth - document.body.clientWidth);}

var scroll = function (stepX, stepY) {
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
    window.scrollTo((scrollX + stepX), (scrollY + stepY));
                
    if (!stopY || !stopX) {
        setTimeout(function () { scroll(stepX, stepY) }, 20);
    }
}

Popularity 5/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: auto javascript scroll

Link to this answer
Share Copy Link

Contributed on Jan 04 2023

Raghav Tripathi

0 Answers Avg Quality 2/10

auto scroll while dragging javascript

Contents

More Related Answers

auto scroll while dragging javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.