HTML跨度标签自动滚动[重复]答案

【问题标题】：HTML span tag auto scroll [duplicate]HTML跨度标签自动滚动[重复]
【发布时间】：2020-01-24 02:17:25
【问题描述】：

在我的 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;我想把它构建成自动滚动到底部当文本超出时。

感谢您的宝贵时间。

【问题讨论】：

这会有所帮助：stackoverflow.com/questions/7303948/…

标签： javascript html css

【解决方案1】：

您可以像下面这样进行操作，正如question 中所建议的那样，我已使用interval 更新element's scrollTop to its scrollHeight every couple of seconds。下面的示例我使用textarea 来重现data。

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>

【讨论】：

【解决方案2】：

我能想到的最佳解决方案是增加文本容器的滚动，该函数使用事件调用，我使用“keyup”，但是当您的程序使用语音时，您可以使用更改。其他函数只在div上显示输入值。

const input = document.querySelector('#text-field');
const div = document.querySelector('#text-display');

function pageScroll() {
        div.scrollBy(0,300);
}
function writeLines(){
   div.innerHTML = input.value;
   pageScroll();
}

input.addEventListener('keyup',writeLines);

<input id="text-field" type="text" placeholder="Escribe aqui"/>
<div id="text-display" style="height: 100px; overflow-y: scroll; width: 200px"></div>

【讨论】：