Question

我有一个包含大量项目的div。我通过单击按钮动态选择这些项目，在我的情况下溢出是自动的。我想要的是当选择一个不可见的项目来滚动div以便可见时。我怎么能这样做？

Answer 1

您可以使用HTMLElement的scrollTop属性来设置滚动内容的数量。

您可以从要滚动的元素的offsetTop中获取所需的金额。

例如使用此HTML：

<div id="container">
  <p id="item-1">foo</p>
  <p id="item-2">bar</p>
  <p id="item-3">baz</p>
</div>

您可以使用此JavaScript将容器div滚动到第三段：

document.getElementById("container").scrollTop = document.getElementById("item-3").offsetTop;

Answer 2

另一种选择是使用 jQuery 以及插件 ScrollTo 。

Answer 3

单击按钮并选择一个项目时，调用此选定项目的focus（）方法。这将导致自动滚动到您的元素：

<div style="height:80px; overflow:auto;">
    <input type="text" id="id1"><br><br>
    <input type="text" id="id2"><br><br>
    <input type="text" id="id3"><br><br>
    <input type="text" id="id4"><br><br>
    <input type="text" id="id5"><br><br>
    <input type="text" id="id6"><br><br>
</div>
<input type="button" onclick="document.getElementById('id6').focus();">

Answer 4

您还可以使用DIV的scrollTop或scrollLeft属性（取决于滚动是水平还是垂直）。

之前我已经完成了这个并且使用了setTimeout事件来使其流畅地滚动，而不是在1个动作中。这是没有JQuery的。

Answer 5

另一种选择......锚点。

为每个项目分配唯一ID，当您想要滚动到特定项目时，请执行以下JavaScript代码：

location.hash = itemID;

...其中itemID是一个变量，其中包含您要滚动到的元素的ID。

史蒂夫

DIV自动滚动

5 个答案: