- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
当在 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/
在 Vaadin 7.0,显示时JavaBean Table 中的数据与 BeanContainer ,用新数据刷新表的正确方法是什么? 最佳答案 该表通过监听器监视表项的属性。如果您通过表的 Ite
首先,我使用的是带有 Axis2 1.6.2 的 eclipse,我正在 tomcat 6 上部署我创建的 Web 服务。Web 服务是在 eclipse 中通过自上而下的方法创建的。 我被要求使对我
我已将 Rails 3.1.1 应用程序升级到 Rails 3.1.3,现在,对于每个请求,它仅响应错误数量的参数(3 for 1)。不幸的是,它没有说明错误在哪里,并且应用程序跟踪为空。我认为存在一
我是一名优秀的程序员,十分优秀!