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

Question

当在 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 中并将存储的高度设置为当前高度。

Answer 1

您可以检查元素的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>