scrollLeft 和 scrollTop 返回元素内容相对于左上角的滚动偏移量（像素），scrollLeft 表示水平偏移，scrollTop 表示垂直偏移；仅对实际出现滚动条的 overflow 元素有效，获取页面整体滚动需兼容处理 document.body 与 document.documentElement，推荐使用 Math.max 或 document.scrollingElement（IE 不支持需 fallback）；监听 scroll 事件应设 passive: true，高频操作用 requestAnimationFrame，iframe 内需通过 contentDocument 获取且注意跨域限制。

scrollLeft 和 scrollTop 返回什么值

这两个属性返回的是元素内容相对于其左上角的滚动偏移量，单位是像素。scrollLeft 是水平方向（X 轴），scrollTop 是垂直方向（Y 轴）。注意：它们只对设置了 overflow 且实际出现滚动条的元素有效；对 body 或 document.documentElement 获取时，不同浏览器默认行为不一致，必须区分场景。

获取页面整体滚动位置的兼容写法

直接读 document.body.scrollTop 在 Chrome/Firefox 中可能返回 0（因为滚动容器实际是 document.documentElement），而 Safari 又可能相反。稳妥做法是取两者的最大值：

const scrollY = Math.max(
  document.body.scrollTop,
  document.documentElement.scrollTop
);
const scrollX = Math.max(
  document.body.scrollLeft,
  document.documentElement.scrollLeft
);

• 不要只读 document.body 或只读 document.documentElement
• document.scrollingElement 是标准方案，但 IE 不支持，生产环境仍需 fallback
• 若用现代框架（如 React），注意 SSR 渲染时 document 不存在，需加判空

监听滚动位置变化的正确方式

别在 scroll 事件里直接做重逻辑，容易卡顿。常见错误是没节流、没用 requestAnimationFrame 或误用 debounce 导致延迟感知。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

window.addEventListener('scroll', () => {
  // 错误：每次滚动都触发计算
  updateHeaderState();
}, { passive: true });

• 加 { passive: true } 提升滚动流畅度（尤其移动端）
• 高频更新 DOM 或计算布局时，用 requestAnimationFrame 包一层
• 若只需“滚动停止后执行”，再加简单 timeout debounce，但别过度封装

滚动位置在 iframe 里怎么取

iframe 内部文档的滚动位置不能通过父页面的 window 直接读取，必须访问其 contentWindow 或 contentDocument。

立即学习“前端免费学习笔记（深入）”；

const iframe = document.querySelector('iframe');
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
const y = iframeDoc.scrollingElement?.scrollTop || 
         iframeDoc.body.scrollTop || 
         iframeDoc.documentElement.scrollTop;

• iframe 跨域时会触发 SecurityError，无法读取 —— 这不是代码问题，是浏览器限制
• 确保 iframe 已加载完成（监听 load 事件后再取值）
• scrollingElement 在 iframe 内同样存在兼容性，fallback 逻辑不可省

滚动位置看似简单，但跨浏览器、跨上下文（iframe/Shadow DOM）、跨渲染时机（SSR/CSR）的细节叠加起来，很容易漏掉一两个条件就出错。最常被忽略的是 passive 默认值和 iframe 跨域静默失败。