时间戳

首页 > 解决方案 > HTML span 标签自动滚动

javascript - HTML span 标签自动滚动

问题描述

在我的 HTMl 文件中，我试图用一些语音识别文本填充跨度文本区域。我在这里为一件事苦苦挣扎：

跨区自动滚动：

<span id="final_span" class="final"></span>

Javascript代码：

var final_span = document.getElementById("final_span");
finalDiv.innerHTML += '&nbsp' + data + '<p>';
finalDiv.scrollTop = finalDiv.scrollHeight;

JavaScript里面的数据一直在增加，但是当超过span限制时，右边会出现一个滚动条，因为我写的CSS代码： overflow-y: scroll;我想把它构建成自动滚动，直到文本超过底部。

谢谢你的时间。

标签： javascripthtmlcss

解决方案

你可以像下面那样做，正如我曾经更新过的这个问题中所建议的那样。下面的例子我用来重现。intervalelement's scrollTop to its scrollHeight every couple of secondstextareadata

document.getElementById("text").addEventListener("input", function(){
  document.getElementById('final_span').innerHTML += `&nbsp ${this.value}`;
});


window.setInterval(function() {
  document.getElementById('final_span').scrollTop = document.getElementById('final_span').scrollHeight;
}, 100);
<textarea id="text"></textarea>  
<span id="final_span" class="final" style="display:block; height:100px; overflow-y: scroll;"></span>

推荐阅读