DIV 自动滚动答案

【问题标题】：DIV auto scrollDIV 自动滚动
【发布时间】：2014-05-27 21:14:22
【问题描述】：

我有一个包含大量项目的 div。我通过单击按钮动态选择这些项目，在我的情况下溢出是自动的。 What I want is that when an item that is not visible is selected to scroll the div so that can be visible.我该怎么做？

【问题讨论】：

标签： javascript html dom

【解决方案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;

【讨论】：

js document.getElementById("container").scrollTop上有错别字

【解决方案2】：

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

【讨论】：

【解决方案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();">

【讨论】：

这似乎不适用于常规的“div”元素（至少，在 Safari 4 或 Firefox 3 中不行）。
您在那里编写的代码运行良好。但是，如果将“input”元素替换为“div”元素，则聚焦 div 元素似乎不会滚动到它。有关示例，请参见 cloud.quintusquill.com/dropbox/ScrollTest.html。
是的，我现在明白了，你是对的。我以为他提到了表单元素，在这种情况下，我认为使用 JQuery 插件很好。谢谢！

【解决方案4】：

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

我以前做过这个，并使用了一个 setTimeout 事件让它流畅地滚动，而不是 1 个动作。这是没有 JQuery 的。

【讨论】：

【解决方案5】：

还有另一种选择……锚。

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

location.hash = itemID;

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

史蒂夫

【讨论】：