shielder_li 2021-07-07 01:46 采纳率: 100%
浏览 41
已采纳

html文本一个个显示并不断上移

我的字一个个显示了，但字多的话得自己往下翻，想让他自己不断上移

img

  • 写回答

1条回答 默认 最新

  • CSDN专家-天际的海浪 2021-07-07 01:59
    关注

    div设置overflow: hidden 或者 auto; 和height: 500px;

    然后每次更新显示后执行
    txt.scrollTop = txt.scrollHeight;
    让滚动条到最底。

    如果是要整个页面的滚动条到最底，可以用。
    var root = document.compatMode=="CSS1Compat" ? document.documentElement : document.body;
    root.scrollTop = root.scrollHeight;

    代码如下：（如有帮助，望采纳！谢谢! 点击我这个回答右上方的【采纳】按钮）

    <!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
    <title> 页面名称 </title>
<script type="text/javascript">
var i = 0;
var content = "文本内容1 文本内容2 文本内容3 文本内容4 文本内容5 文本内容6 文本内容7 文本内容8 文本内容9 文本内容10 文本内容11 文本内容12 文本内容13 文本内容14 文本内容15 文本内容16 文本内容17 文本内容18 文本内容19 文本内容20";
function show() {
    var txt = document.getElementById("txt");
    txt.innerText = content.substr(0,i);
    var root = document.compatMode=="CSS1Compat" ? document.documentElement : document.body;
    root.scrollTop = root.scrollHeight;
    i++;
    if (i<=content.length) {
        setTimeout("show()", 300);
    }
}
</script>
</head>
<body onload="show()" style="font-size: 120px;">
<div id="txt"></div>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 Llama如何调用shell或者Python
  • ¥20 谁能帮我挨个解读这个php语言编的代码什么意思？
  • ¥15 win10权限管理，限制普通用户使用删除功能
  • ¥15 minnio内存占用过大，内存没被回收（Windows环境）
  • ¥65 抖音咸鱼付款链接转码支付宝
  • ¥15 ubuntu22.04上安装ursim-3.15.8.106339遇到的问题
  • ¥15 blast算法（相关搜索：数据库）
  • ¥15 请问有人会紧聚焦相关的matlab知识嘛？
  • ¥15 网络通信安全解决方案
  • ¥50 yalmip+Gurobi