如何使用 javascript 基于 id 或 class 值自动滚动？答案

【问题标题】：How to autoscroll based on id or class value using javascript?如何使用 javascript 基于 id 或 class 值自动滚动？
【发布时间】：2015-06-03 21:04:57
【问题描述】：

下面的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 自动对焦和自动滚动查看读数？

【问题讨论】：

标签： javascript html css autoscroll

【解决方案1】：

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

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

Fiddle

【讨论】：

【解决方案2】：

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

为了跟踪视图中的元素，我为每个单词使用了<span>，并在所有已阅读的单词上附加了一个类read。这样，您可以使用 jQuery 通过以下选择器选择下一个单词：

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

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

JSFiddle

【讨论】：