如何在 iframe 中实现网页自动滚动到底部

本文介绍通过 javascript 的 `window.scrollto()` 方法,在 iframe 加载完成后自动平滑滚动至页面底部,适用于数字标牌、信息展示屏等无需交互的场景。

要在嵌入于 iframe 的网页中实现自动滚动至底部(如用于数字看板、信息轮播屏等无人值守场景),关键在于确保滚动行为在页面完全加载、DOM 可用且滚动高度已知后执行。直接在

末尾插入 // 确保 DOM 构建完成后再执行滚动 document.addEventListener('DOMContentLoaded', () => { // 平滑滚动至页面底部 window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: 'smooth' }); });

注意事项:

  • 若 iframe 来源与父页面跨域,父页面无法控制其内部滚动,此时必须将自动滚动逻辑写在 iframe 的源页面中(即上例所示);
  • scrollHeight 返回的是整个文档高度(含溢出),确保内容足够长才能触发可见滚动;
  • 在部分老旧浏览器(如 IE)中不支持 behavior: "smooth",可降级为 window.scrollTo(0, document.body.scrollHeight);
  • 如需循环滚动或定时重置,可结合 se

    tInterval 与 scrollTo 配合 scrollTop 监听实现,但本场景以单次到底为准。

    该方案简洁、可靠、无需第三方库,完美适配嵌入式展示场景。