如何让Chrome浏览器自动滚动显示文本并解决换行失效问题

核心问题修复与功能实现 #

1. 自动滚动到最新内容 #

每次输出字符后，让页面自动滚动到内容底部，无需手动操作。通过scrollIntoView方法让目标容器的底部始终处于可视区域：

// 每次添加字符后执行滚动
document.getElementById("testType").scrollIntoView({ behavior: "smooth", block: "end" });

2. 实现换行效果 #

原代码使用textContent会将HTML标签解析为纯文本，改用innerHTML即可正常渲染<br>等标签。直接在文本中插入<br>就能实现换行：

// 替换textContent为innerHTML，支持HTML标签渲染
document.getElementById("testType").innerHTML += txt.charAt(i);

3. 循环展示文本 #

当一轮文本输出完成后，清空容器、重置索引，延迟一段时间后重新开始打字，实现循环效果：

function typeWriter() {
  if (i < txt.length) {
    // ... 输出逻辑
  } else {
    // 重置状态，延迟后重启打字
    setTimeout(() => {
      i = 0;
      document.getElementById("testType").innerHTML = "";
      typeWriter();
    }, 1000); // 循环间隔可根据需求调整
  }
}

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: MyUnderwood;
src: url(~/typeWriter/MyUnderwood.ttf);
}

body {
font-family: MyUnderwood;
font-size: 30px;
margin: 10px 50px;
letter-spacing: 6px;  
font-weight: normal;
}
</style>
</head>
<body> 
<div id="testType"></div>

<script>
var i = 0;
var speed = 100;
// 插入<br>标签实现换行的示例文本
var txt = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>Sed faucibus turpis in eu mi.<br>Tortor vitae purus faucibus ornare suspendisse sed nisi.<br>Elementum curabitur vitae nunc sed velit.<br>Accumsan in nisl nisi scelerisque eu ultrices vitae auctor.<br>Lectus sit amet est placerat in egestas erat imperdiet sed.<br>In iaculis nunc sed augue lacus.<br>Tristique nulla aliquet enim tortor at.<br>Ac placerat vestibulum lectus mauris ultrices.<br>Fermentum leo vel orci porta non pulvinar neque.<br>Erat imperdiet sed euismod nisi.<br>Vel fringilla est ullamcorper eget nulla facilisi etiam.<br>Eget nullam non nisi est.<br>A diam maecenas sed enim.<br>Pulvinar etiam non quam lacus suspendisse faucibus interdum.<br>Nullam eget felis eget nunc lobortis.<br>Urna cursus eget nunc scelerisque viverra mauris in.<br>Ultrices tincidunt arcu non sodales neque sodales ut etiam sit.<br>Vitae sapien pellentesque habitant morbi tristique senectus et netus et.<br>Purus non enim praesent elementum facilisis leo vel fringilla est.<br>Aliquet sagittis id consectetur purus.<br>Venenatis lectus magna fringilla urna porttitor rhoncus dolor.<br>Arcu odio ut sem nulla pharetra diam sit amet.";

function typeWriter() {
  if (i < txt.length) {
    const el = document.getElementById("testType");
    el.innerHTML += txt.charAt(i);
    i++;
    // 自动滚动到内容底部
    el.scrollIntoView({ behavior: "smooth", block: "end" });
    setTimeout(typeWriter, speed);
  } else {
    // 循环展示，延迟1秒后重置
    setTimeout(() => {
      i = 0;
      document.getElementById("testType").innerHTML = "";
      typeWriter();
    }, 1000);
  }
}
    
document.addEventListener("DOMContentLoaded", typeWriter);
</script>
</body>
</html>

关键修改说明 #

• 替换textContent为innerHTML，支持渲染<br>换行标签
• 添加scrollIntoView实现自动滚动，确保最新内容始终可见
• 在文本输出完成后，重置索引和容器内容，实现循环打字效果
• 移除冗余的onload事件，仅保留DOMContentLoaded监听

内容的提问来源于stack exchange，提问作者jfmac