如何使用 javascript 根据 id 或 class 值自动滚动？

Question

下面的 html 代码 <div id="sim"></div> 和相关的 CSS 代码

#sim{
    width:800px;
    height:300px;
    border:solid 1px #2e2e2e;
    color:#2e2e2e;
    padding:5px;
overflow:auto;
border:9px outset #0ADA0A;
margin-top:1em;
font-size:16pt;
}

用于模拟阅读。如果我要在框中输入超过 2000 个单词，该框会随着滚动条变化。当我按下按钮时，它会在文本上突出显示。

但是，边框大小为width:800px; height:300px;，文字溢出到框内，文字已隐藏高亮。

https://jsfiddle.net/8Lwm6gh1/40/

如何使用 JS 查看自动对焦和自动滚动的读数？

Answer 1

如果我对你的问题的理解正确，你可以使用Element.scrollIntoView()，并在超时结束时添加这一行：

$('#sim b:last')[0].scrollIntoView(false);

Fiddle

Answer 2

我可能误解了您想要实现的目标，但我理解它的方式是您希望视图滚动，以便当前单词始终显示在 div。

为了跟踪视图中的元素，我为每个单词使用了一个 <span>，并在所有已阅读的单词上附加了一个 class read。这样，您可以使用 jQuery 到 select 下一个单词，方法是使用以下 select 或：

var unread = $('span:not(.read):first');

我修改了你写的代码，让它工作了。你也永远不会停止超时，所以我添加了一个 clearTimeout()-function.

JSFiddle

如何使用 javascript 根据 id 或 class 值自动滚动？

How to autoscroll based on id or class value using javascript?

html

javascript

css

autoscroll