Draggable div в прокручивающемся контейнере подпрыгивает при достижении дна

Question

Я собираю пользовательский элемент управления в чистом JS, который имитирует расписание событий.Одно событие представлено перетаскиваемым div.

Вот наиболее важные функции JS:

function onDrag(event)
{
    console.log("**** DRAG ****");

    if (dragging)
    {
        console.log("dragging = " + dragging);

        //event.preventDefault();

        currentY = event.clientY - initialY;

        // Check whether we need to scroll up or down

        //handleScroll();

        // Limit dragging to size of background container

        if(currentY < 0)
        {
            currentY = 0;
        }
        else if(currentY > background_height - draggable.offsetHeight)
        {
            currentY = background_height - draggable.offsetHeight;
        }
        else
        {
            currentY = currentY;
        }

        yOffset = currentY;

        moveIt(currentY);
    }
}

function moveIt(yPos)
{
    console.log("moveIt : yPos = " + yPos);

    draggable.style.transform = "translate3d( 0px, " + yPos + "px, 0)";
}

JSFiddle здесь

Все в основном работает,но неудивительно, что он работает не так чисто, как я надеялся.

При перетаскивании в нижнюю часть родительского контейнера контейнер должен автоматически прокручиваться.На практике перетаскиваемый div следует за мышью, пока я не перетаскиваюсь под контейнер, после чего перетаскиваемый отскакивает назад примерно на 300 пикселей вверх и садится к середине контейнера (часто частично или полностью вне области просмотра).

Я хочу, чтобы перетаскиваемый объект просто парковался у края родительского контейнера, даже если я пытаюсь перетащить его на 1000 пикселей.Если я очень медленно нажимаю, контейнер прокручивается должным образом и перетаскиваемый элемент останавливается на краю, но если я неряшливый и перетаскиваю край (как я ожидаю, это сделает большинство пользователей), я получаю отскок.

Пример журнала консоли, отображающий отскок:

**** DRAG ****
dragging = true
moveIt : yPos = 712
**** DRAG LEAVE ****
**** DRAG ****
dragging = true
moveIt : yPos = 713
**** DRAG ****
dragging = true
moveIt : yPos = 713
**** DRAG ****
dragging = true
moveIt : yPos = 415

Я могу переключиться с перетаскивания HTML5 и использовать стиль, управляемый MouseEvent, просто закомментировав прослушиватели перетаскивания и заменив события мыши, чтобы избежать этого эффекта отскока.Тот факт, что с событиями мыши все работает так, как я хочу, подсказывает мне, что я сталкиваюсь с чем-то недокументированным с HTML5 DnD.Я с радостью переключаюсь на этот подход, основанный на событиях мыши, но затем мне нужно реализовать прокрутку вручную, и когда я пытаюсь это сделать, чем больше я перетаскиваю, тем дальше перемещается курсор мыши.Вы можете отредактировать скрипку, комментируя слушателей DnD

Я счастлив иметь решение, подходящее к событиям DnD или мыши, но в основном я хочу знать, что вызывает эти странные поведения.Что-то не так с тем, как я структурировал страницу?CSS испорчен?Есть ли какое-либо недокументированное (но, возможно, ожидаемое) поведение, вызывающее эти проблемы?