gpt4 book ai didi

javascript - JS 检测 html 元素何时换行

转载 作者:行者123 更新时间:2023-12-02 23:03:30 24 4
gpt4 key购买 nike

当在 div 中创建元素时,或者当元素向下滚动时,我想向下滚动到该元素,以便您始终可以看到整个文本,因为文本是缓慢添加到元素中的。

我已经有了一种在使用 element.scrollIntoView() 创建元素时自动滚动到元素的方法。

this.setText = function (text) {
this.text = text
this.progress = move
this.element.innerHTML = '[Player]>'
this.element.scrollIntoView({behavior: "smooth"})
}

this.run = function () {
if (this.progress < this.text.length) {
// Add animation for different speeds of typing keys
this.progress += 0.8 * Math.random()
} else {
this.progress = this.text.length
}
// Draw the text at the current line number
const currLine = Math.floor(clamp(this.progress, 0, this.text.length))
this.element.innerHTML = '[Player]>' + this.text.slice(0, currLine)
}

这就是我慢慢向元素添加文本的方式。我想检测换行而不是重复滚动查看元素

编辑:我希望检测元素何时换行而不是查看它是否已换行,即类似于 window.onElementWrap() 的内容,但我可以使用您给我的内容。

我解决问题的方法是每次循环检查高度是否与存储的高度不同,如果不同,则将其滚动到 View 中并将存储的高度设置为当前高度。

最佳答案

您可以检查元素的offsetHeight (例如:this.element.offsetHeight),当文本换行时它会改变。

这是一个例子:

const text = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum varius sit amet mattis vulputate enim nulla. Est ullamcorper eget nulla facilisi etiam dignissim diam quis enim. Pharetra pharetra massa massa ultricies mi. In egestas erat imperdiet sed euismod nisi porta lorem mollis. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper. Aliquam sem et tortor consequat id porta nibh venenatis cras. Aliquam sem et tortor consequat id porta nibh venenatis. Lectus quam id leo in. Pharetra vel turpis nunc eget lorem dolor. Euismod lacinia at quis risus sed vulputate odio. Tempus iaculis urna id volutpat lacus laoreet non. Mattis rhoncus urna neque viverra justo. Massa eget egestas purus viverra. Gravida dictum fusce ut placerat orci. In massa tempor nec feugiat. Mauris cursus mattis molestie a. Ultrices in iaculis nunc sed augue lacus viverra. Vel risus commodo viverra maecenas accumsan. Lectus nulla at volutpat diam ut venenatis tellus. Vestibulum mattis ullamcorper velit sed ullamcorper. Fermentum et sollicitudin ac orci phasellus. Justo laoreet sit amet cursus sit amet dictum. Ipsum consequat nisl vel pretium lectus quam id. Et ligula ullamcorper malesuada proin libero nunc consequat interdum. Pulvinar proin gravida hendrerit lectus. Aliquet nibh praesent tristique magna sit.`

let lines = text.match(/.{150}/g);
lines = [...lines, ...lines];
lines = [...lines, ...lines];

let index = 0;
let prevHeight = testElement.offsetHeight;
const interval = setInterval(() => {
testElement.textContent += lines[index];

const currentHeight = testElement.offsetHeight;
if (currentHeight > prevHeight) {
window.scroll(window.scrollX, window.scrollY + (currentHeight - prevHeight));
}

prevHeight = currentHeight;

index++;
if (index >= lines.length) {
clearInterval(interval);
}
}, 100);
<div id="testElement"></div>

关于javascript - JS 检测 html 元素何时换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57698819/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com