本文介绍如何让嵌入在 iframe 中的网页在加载完成后自动平滑滚动至页面底部，适用于数字标牌、信息展示屏等无需交互的场景。
在实际应用中（如展厅大屏、会议室信息看板），常需将外部网页嵌入 iframe 并实现“开机即播、自动滚动”的效果。关键在于：目标页面自身需主动触发滚动行为，而非由父页面控制 iframe 内容（因跨域限制及 iframe 安全策略，父页通常无法直接操作子页面 DOM）。
✅ 推荐方案：在目标页面末尾注入滚动脚本
确保被嵌入的 HTML 页面（即 iframe 的 src 指向的页面）在加载完成时执行平滑滚动到底部的操作。使用现代浏览器支持的 window.scrollTo() 方法，并指定 behavior: "smooth" 实现流畅动画：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自动滚动页面</title>
</head>
<body>
<!-- 示例长内容 -->
<p>页面内容...</p>
<p>页面内容...</p>
<!-- 此处省略多行重复内容，实际请填充足够高度以产生滚动条 -->
<p>页面内容...</p>
<!-- 滚动脚本必须放在 body 底部或使用 DOMContentLoaded 保障执行时机 -->
<script>
// 等待 DOM 加载完成，再滚动到底部
document.addEventListener('DOMContentLoaded', () => {
window.scrollTo({
left: 0,
top: document.body.scrollHeight,
behavior: 'smooth'
});
});
</script>
</body>
</html>⚠️ 注意事项：务必将 <script> 放在 </body> 之前，或使用 DOMContentLoaded 事件监听，避免因 DOM 未就绪导致 scrollHeight 获取为 0；若页面含动态加载内容（如 AJAX 渲染、图片懒加载），需在所有内容渲染完毕后再调用 scrollTo，可结合 window.onload 或自定义渲染完成钩子；scrollHeight 返回的是整个文档高度（含溢出部分），适用于垂直滚动到底；若需水平滚动，可改用 scrollWidth；不建议使用 setInterval 或 setTimeout 模拟滚动，既不精准又增加维护成本。
? 补充：如需循环滚动（回到顶部后重滚）
可在滚动结束后延迟跳转回顶部并再次触发，形成循环效果（适用于信息轮播）：
document.addEventListener('DOMContentLoaded', () => {
const scrollToBottom = () => {
window.scrollTo({
top: document.body.scrollHeight,
behavior: 'smooth'
});
};
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
};
// 首次滚动到底部
scrollToBottom();
// 底部停留2秒后返回顶部，再延时1秒重新滚动（可根据需求调整）
setTimeout(() => {
scrollToTop();
setTimeout(scrollToBottom, 1000);
}, 2000);
});该方案轻量、兼容性好（Chrome 61+、Firefox 68+、Safari 15.4+ 均支持 smooth 行为），且完全由目标页面自主控制，规避跨域与 iframe 权限问题，是数字展示类场景的理想实践。
