如何滚动溢出:拖动对象时滚动div

Question

假设我有一个 id #draggable 的可拖动元素。我还有一个div，其中包含一个 id #list 的可放置div 列表。但是容器div 的高度有限，因此它一次只能显示 3 个可放置的div(A、B 和 C(。该容器div 设置为 overflow:scroll 。

当我将容器div 拖

到它上面时，我如何设法让容器div 滚动#draggable？因为现在我无法将元素放在溢出隐藏的最后一个可放置元素(D、E、F、G(上。

请参阅此小提琴以进行演示

<span id="draggable">draggable</span>
<hr>
<div style="height:200px;overflow:scroll">
  <ul id="list">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
  </ul>
</div>

此外，如果您将元素放在overflow:scrolldiv 下，它实际上会放在隐藏的可放置div 上！

如何处理这些问题？

Answer 1

最简单的

解决方案是将div 移动到div内#draggable并附加overflow:scroll，如下所示：

<div style="height:200px;overflow:scroll">
  <span id="draggable">draggable</span>
  <hr/>
  <ul id="list">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
  </ul>
</div>

请参阅更新的小提琴：https://jsfiddle.net/matikucharski/v80kppez/2/