Question

我们说我有一个标识为#draggable的可拖动元素。我还有一个div，其中包含一个id为#list的可删除div列表。但容器div的高度有限，因此它一次只能显示3个可放弃的div（A，B和C）。该容器div设置为overflow:scroll。

当我将#draggable元素拖过它时，我怎么能设法让容器div滚动？因为现在我不能将元素放在溢出（D，E，F，G）隐藏的最后一个可放置元素上。

See this fiddle for demo

<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:scroll div下，它实际上会落在隐藏的可放置div上！

如何处理这些问题？

Answer 1

最简单的解决方案是将#draggable div移到div内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/

如何滚动溢出：拖动对象时滚动div？

1 个答案: