本文介绍通过 javascript 的 `window.scrollto()` 方法，在 iframe 加载完成后自动平滑滚动至页面底部，适用于数字标牌、信息展示屏等无需交互的场景。
要在嵌入于 iframe 的网页中实现自动滚动至底部（如用于数字看板、信息轮播屏等无人值守场景），关键在于确保滚动行为在页面完全加载、DOM 可用且滚动高度已知后执行。直接在 <body> 末尾插入 <script> 虽简单有效，但存在兼容性与时机风险（如脚本执行过早导致 scrollHeight 为 0）。更健壮的做法是监听 DOMContentLoaded 或 load 事件，并结合 behavior: "smooth" 实现自然滚动效果。
以下是一个推荐的完整 HTML 示例（可直接作为 iframe 源文件使用）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自动滚动页面</title>
<style>
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
p {
margin: 24px 0;
padding: 0 16px;
font-size: 18px;
}
</style>
</head>
<body>
<p>欢迎来到自动滚动演示页</p>
<p>此页面将在加载完成后自动滚动至底部</p>
<!-- 更多内容... -->
<p>第 10 行</p>
<p>第 11 行</p>
<p>第 12 行</p>
<p>第 13 行</p>
<p>第 14 行</p>
<p>第 15 行</p>
<p>第 16 行</p>
<p>第 17 行</p>
<p>第 18 行</p>
<p>第 19 行</p>
<p>第 20 行</p>
<p>—— 滚动终点 ——</p>
<script>
// 确保 DOM 构建完成后再执行滚动
document.addEventListener('DOMContentLoaded', () => {
// 平滑滚动至页面底部
window.scrollTo({
top: document.body.scrollHeight,
left: 0,
behavior: 'smooth'
});
});
</script>
</body>
</html>✅ 注意事项：
- 若 iframe 来源与父页面跨域，父页面无法控制其内部滚动，此时必须将自动滚动逻辑写在 iframe 的源页面中（即上例所示）；
- scrollHeight 返回的是整个文档高度（含溢出），确保内容足够长才能触发可见滚动；
- 在部分老旧浏览器（如 IE）中不支持 behavior: "smooth"，可降级为 window.scrollTo(0, document.body.scrollHeight)；
- 如需循环滚动或定时重置，可结合 setInterval 与 scrollTo 配合 scrollTop 监听实现，但本场景以单次到底为准。
该方案简洁、可靠、无需第三方库，完美适配嵌入式展示场景。
