如何仅在Div显示最后一行时自动滚动至其底部？

要解决手动上滑后仍自动滚动的问题，核心是准确判断容器是否处于滚动到底部的状态，只有当用户原本就在查看最后一行时，才在新增日志后自动滚动。

判断底部状态的逻辑 #

通过容器的三个关键属性计算：

• scrollTop：容器已滚动的垂直距离
• clientHeight：容器可视区域的高度
• scrollHeight：容器内容的总高度（含不可见部分）

当 scrollTop + clientHeight >= scrollHeight - 1 时（减1是为了兼容浏览器精度误差），即可认为容器处于底部状态。

修改后的完整代码 #

HTML

<body onload="onLoad()">
  <div id="output" style="overflow-y:scroll; height:200px; width:300px; background:yellow"></div>
</body>

JavaScript

var output;
var i = 0;

function onLoad() {
  output = document.getElementById("output");
  onTimeout();
}

// 判断容器是否处于底部
function isAtBottom(element) {
  return element.scrollTop + element.clientHeight >= element.scrollHeight - 1;
}

function onTimeout() {
  i++;
  // 新增日志前先记录是否在底部
  var wasAtBottom = isAtBottom(output);
  
  var line = document.createElement("div");
  line.innerText = "Log " + i;
  output.appendChild(line);
  
  // 仅当之前处于底部时，才自动滚动到新的底部
  if (wasAtBottom) {
    output.scrollTop = output.scrollHeight;
  }
  setTimeout(onTimeout, 1000);
}

说明 #

• 新增isAtBottom函数封装判断逻辑，复用性更强，也避免代码冗余。
• 在添加日志前判断状态，能精准反映用户当前的浏览位置：如果用户已经手动上滑查看旧日志，wasAtBottom会是false，不会触发自动滚动；如果用户一直在底部浏览，就会自动跟进新日志内容。

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