如何为 div 元素实现平滑滚动到底部-js教程-PHP中文网

如何为 div 元素实现平滑滚动到底部

本文介绍两种原生 JavaScript 方式为任意 div 容器添加平滑滚动到底部功能：通过 CSS scroll-behavior: smooth 统一启用，或通过 JS 动态设置 scrollBehavior 属性，配合 scrollTop = scrollHeight 实现流畅、无闪跳的滚动效果。

本文介绍两种原生 javascript 方式为任意 div 容器添加平滑滚动到底部功能：通过 css `scroll-behavior: smooth` 统一启用，或通过 js 动态设置 `scrollbehavior` 属性，配合 `scrolltop = scrollheight` 实现流畅、无闪跳的滚动效果。

在 Web 开发中，聊天窗口、日志面板或实时消息流等场景常需动态追加内容并自动滚动到底部。虽然 element.scrollTop = element.scrollHeight 能快速定位到底部，但默认是瞬时跳跃式滚动，体验生硬。幸运的是，现代浏览器（Chrome 61+、Firefox 63+、Safari 15.4+、Edge 79+）已原生支持平滑滚动行为，无需依赖第三方库。

✅ 方法一：CSS 驱动（推荐，简洁且可复用）

只需为目标容器添加一行 CSS，即可全局启用平滑滚动：

#con-result {
  scroll-behavior: smooth;
}

随后，原有 JavaScript 逻辑无需任何修改，scrollTop 赋值将自动触发平滑动画：

function updateScroll() {
  const objDiv = document.getElementById("con-result");
  objDiv.scrollTop = objDiv.scrollHeight;
}

⚠️ 注意事项：

前端开发规范

企业级前端开发规范 Skill，包含命名、目录、CSS/JS/TS、Vue/React、Git、构建、性能、安全完整规范

下载

scroll-behavior: smooth 作用于该元素自身及其内部滚动操作（如 scrollTop、scrollIntoView()），不影响父容器或页面整体；
必须在首次调用 updateScroll() 之前应用该样式（内联样式、
若容器使用 overflow: hidden 或未设置明确高度/max-height，可能导致滚动失效——请确保容器具有可滚动的溢出区域（如 overflow-y: auto）。

✅ 方法二：JavaScript 动态设置（灵活可控）

若需按需启用（例如仅在特定交互时开启平滑效果），可直接通过 JS 设置 scrollBehavior：

function updateScroll() {
  const objDiv = document.getElementById("con-result");
  // 动态启用平滑滚动（仅本次生效）
  objDiv.style.scrollBehavior = "smooth";
  objDiv.scrollTop = objDiv.scrollHeight;
  // 可选：重置为 auto 避免影响后续非平滑操作
  // setTimeout(() => { objDiv.style.scrollBehavior = "auto"; }, 300);
}

此方式无需预设 CSS，适合动态创建的容器或条件化滚动场景。但注意：scrollBehavior 是内联样式，会覆盖 CSS 中的同名声明；若需长期保持，建议优先采用方法一。

? 完整示例（含 HTML + JS）

<div id="con-result" style="height: 300px; overflow-y: auto; border: 1px solid #ccc;">
  <div>消息 1</div>
  <div>消息 2</div>
  <!-- 更多内容... -->
</div>
<button onclick="addMessageAndScroll()">添加新消息并滚动到底部</button>

<script>
  // ✅ 推荐：全局 CSS 已设置 scroll-behavior: smooth（见上方）
  function addMessageAndScroll() {
    const container = document.getElementById("con-result");
    const msg = document.createElement("div");
    msg.textContent = `消息 ${container.children.length + 1}`;
    container.appendChild(msg);
    // 自动触发平滑滚动到底部
    container.scrollTop = container.scrollHeight;
  }
</script>