滚动容器中的可拖动div在到达底部时反弹

我在pure JS中组装了一个自定义UI控件,它模拟事件的时间表。一个事件由可拖动的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 here

基本上一切都正常,但毫不奇怪,它不像我所希望的那样干净。

当拖动到父容器的底部时,容器应自动滚动。实际上,draggable div一直跟随鼠标,直到我拖动到容器下方,此时draggable向上反弹约300像素,并向容器的中间放置(通常部分或完全离开视口)。

我想要的是让draggable把自己停在父容器的边缘,即使我试图把它拖到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驱动的样式,只需注释掉拖放监听器并替换鼠标事件,就可以避免这种反弹效果。事实上,事情的工作方式,我想与鼠标事件暗示,我正在运行的东西未经HTML5DND文件。我很高兴切换到这个鼠标事件驱动的方法,但是我必须手动实现滚动,当我尝试时,我拖动的越多,可拖动的鼠标指针移动的越远。你可以编辑小提琴,注释掉DnD监听器

我很高兴有一个解决办法要么DnD或鼠标事件的方法,但主要是,我想知道是什么导致这些奇怪的行为。我的页面结构有问题吗?CSS搞砸了吗?是否有一些未经记录(但可能是预期的)的行为导致了这些问题?