滚动时jQuery可排序包含中断

Question

我正在使用一个使用可排序列表的小部件，我遇到了容器滚动时出现的这个小问题。我不希望<li>超出<ul>，因此在将sortable应用于列表时设置containment: "parent"。

当容器不滚动时，包含工作正常。但是当它执行时，如果某个项目被拖动到未显示的列表的任何一端，则收容将停止按预期工作，并且该项目将超出。

我不确定我是否遗漏了可排序的API，或者这只是一个jquery-ui错误。这些是我设定的选项：

$(".sortable").sortable({
    axis: "y",
    containment: "parent",
    cursor: "move",
    items: "li",
    tolerance: "pointer",
});

容器的CSS如下：

.list-holder {
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
}

此jsFiddle显示两种情况，包括滚动和不滚动。

Answer 1

将此代码添加到您的ul

ul{
    max-height: 240px;
    overflow: hidden;
}

该元素向下滚动，因为即使我们看不到它，实际列表高度仍然存在于页面中。

以下是修改后的fiddle