Scrolling page for long list issue

[itajackass]

I've a problem when I've a lot of entry in my UL list and they don't show all at the same time in the page (so page get the scroller).
If I want to (for example) sort item at the first position, in the last position (outside the viewport), i can't scroll the page using mouse wheel when item to move is clicked. Also the page doesn't scroll if mouse pointer is closer to border-bottom of the page...

So I have to put the item in the middle, release click to sort it, scroll partially the page, sort again the item to the bottom until I get wanted position. Is there a way to fix it?

[lukasoppermann]

Hey, this topic has been brought up before #185 I am happy to accept PRs if you want to provide a solution.

Cheers,
Lukas

[kaffarell]

@itajackass could you provide: (Operating System, Browser and Browser Version).
I can scroll down when I drag the element to the bottom of the page.
Works on Ubuntu in Chrome and Firefox

[nicojerome]

I solved this by adding an auto-scroll if the mouse cursor moves close to (or over) the top/bottom edge of the list while sorting. My list is a scrollable container (overflow-y: scroll) in my case:

sortable(container)

// Add Auto Scroll

var isScrolling;
var scrollSpeed = 10; // Adjust scroll speed as needed
var THRESHOLD = 20; // Adjust threshold distance as needed

function startScroll(container, direction) {
    if (isScrolling) return;

    isScrolling = setInterval(function() {
        if (direction === 'up') {
            container.scrollTop -= scrollSpeed;
        } else if (direction === 'down') {
            container.scrollTop += scrollSpeed;
        }
    }, 20); // Adjust the interval as needed
}

function stopScroll() {
    clearInterval(isScrolling);
    isScrolling = undefined
}

function autoScroll(e) {
    var rect = container.getBoundingClientRect();
    var topDistance = e.clientY - rect.top;
    var bottomDistance = rect.bottom - e.clientY;

    if (topDistance < THRESHOLD) {
        startScroll(container, 'up');
    } else if (bottomDistance < THRESHOLD) {
        startScroll(container, 'down');
    } else {
        if (isScrolling) stopScroll()
    }
}

sortable(container)[0].addEventListener('sortstart', function(e) {
    window.addEventListener('drag', autoScroll);
});

sortable(container)[0].addEventListener('sortstop', function(e) {
    window.removeEventListener('drag', autoScroll);
});