HTML页面日志内容滚动到底部失效问题排查

咱们一步步拆解为啥你的代码没效果，以及怎么修复：

核心问题有两个： #

1. 脚本执行时机过早
   你把<script>放在了<div id='log'>的前面，当浏览器执行这段JS时，log这个DOM元素还没被创建出来！document.getElementById('log')会返回null，自然调用不了scrollIntoView()。

2. 外部资源加载的异步特性
   就算把脚本挪到后面，<object>标签加载log.txt是异步操作——页面DOM加载完成时，日志内容可能还没完全渲染出来。这时候你滚动到log div底部，等日志内容加载完撑开div高度后，滚动条又会回到顶部。

修复方案 #

把代码改成这样，就能解决上述两个问题：

<html>
<header>
<meta charset="utf-8">
<title>Plannificateur</title>
<style>
p1 { font-size: 130%; }
p2 { font-size: 80%; }
</style>
</header>
<body>
<form action="" method="POST">
<h1>Liste</h1>
<!-- DERNIER_UTILISATEUR -->
</form>
<br><br><br><br>
<hr>
<h3>Journal des évènements</h3>
<div id='log'>
<object id="logObject" data="log.txt" style="width:100%; height: 500px;"></object>
</div>

<script language="javascript" type="text/javascript">
// 等待整个DOM结构加载完成
document.addEventListener('DOMContentLoaded', function() {
  const logObject = document.getElementById('logObject');
  // 等待object中的日志内容完全加载
  logObject.addEventListener('load', function() {
    const logDiv = document.getElementById('log');
    // 直接将滚动条设置到div的最底部
    logDiv.scrollTop = logDiv.scrollHeight;
  });
});
</script>
</body>
</html>

额外说明 #

• 给<object>添加了固定高度height: 500px;，让滚动条稳定出现在日志区域内，你可以根据需求调整这个数值。
• 用DOMContentLoaded确保DOM元素都已创建，再监听object的load事件，等日志内容完全渲染后再执行滚动操作，就能保证滚动条停在底部了。

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