DIV自动滚动

Question

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

- bobyu

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;

- Rene Saarsoo

---

js代码中有一个拼写错误document.getElementById("container").scrollTop - Fatih Hayrioğlu

Answer 2

另一个选择是使用jQuery与插件ScrollTo一起使用。

- Jose Basilio

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();">  

- Canavar

---

这似乎对常规的“div”元素不起作用（至少在Safari 4或Firefox 3中不起作用）。 - Steve Harrison

你写的代码完美运行。但是，如果你将“input”元素替换为“div”元素，聚焦div元素似乎不会滚动到它。请参见http://cloud.quintusquill.com/dropbox/ScrollTest.html以获取示例。 - Steve Harrison

是的，我现在明白了，你说得对。我以为他提到了表单元素，但在这种情况下，我认为使用JQuery插件是很好的选择。谢谢！ - Canavar

Answer 4

另一种选择是使用锚点。

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

location.hash = itemID;

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

史蒂夫

- Steve Harrison

Answer 5

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

我以前也做过这个，使用setTimeout事件使其流畅地滚动，而不是一次性滚动。但这是不使用JQuery的。

- Fermin