Safari 新增 scrollend 事件支持，补齐主流浏览器兼容版图 - InfoQ¶

站点: InfoQ 抓取日期: 2026-04-16 URL: https://www.infoq.cn/article/Jfw4M9Ipiwkr36CUTguw

Safari 新增 scrollend 事件支持，补齐主流浏览器兼容版图 - InfoQ 首页 AI会议 hot AI课程 hot AI应用 hot 报告 HarmonyOS Snowflake new 更多    写点什么  创作场景  记录自己日常工作的实践、心得发表对生活和职场的感悟针对感兴趣的事件发表随笔或者杂谈从 0 到 1 详细介绍你掌握的一门语言、一个技术，或者一个兴趣、爱好或者，就直接把你的个人博客、公众号直接搬到这里登录 / 注册企业动态行业深度 AI&大模型出海后端芯片&算力架构大数据软件工程云计算大前端管理/文化 Safari 新增 scrollend 事件支持，补齐主流浏览器兼容版图作者：Daniel Curtis 明知山 2026-04-15 北京本文字数：1387 字阅读完需：约 5 分钟 Safari 26.2 版本于 12 月发布，新增对 scrollend 事件的支持，这标志着 Web 平台迎来了一个重要里程碑。此次发布意味着这个事件现已获得 Chrome 114、Edge 114、Firefox 109 等所有主流浏览器的基线支持。此次更新填补了平台滚动事件模型中长期存在的空白，让开发者不再需要依靠不稳定的变通方案来检测滚动何时结束。 scrollend 事件会在滚动完全结束时触发一次，无论滚动是由用户手势、键盘导航、平滑滚动，还是 scrollTo() 等 JavaScript 程序化调用触发。根据 WebKit 的公告，这个事件提供了“滚动已完成的可靠信号”，解决了困扰 Web 开发者多年的问题。此前并没有原生方法可以判断滚动何时真正结束，开发者只能使用基于定时器的防抖机制来估算，通常会设置 100 毫秒或更长时间的 setTimeout() 延迟。这种方式既不精确也不可靠，容易出现事件触发过晚，或是用户手指仍在屏幕上时就提前触发等问题。在 scrollend 之前，检测滚动完成需要这样的代码： document .onscroll = event => { clearTimeout ( window .scrollEndTimer) window .scrollEndTimer = setTimeout (callback, 100 ) } 复制代码现在，借助原生浏览器支持，可以用简洁的方式实现相同的结果： document .onscrollend = event => { // scrolling has definitively ended } 复制代码浏览器会在内部处理所有复杂的判断逻辑，包括触摸结束、指针释放、按键操作完成、滚动吸附以及可视视口滚动等。如果滚动位置实际并未发生变化，则不会触发该事件，从而避免假触发。开发者对 Safari 的这一实现反馈积极。X 平台上的一篇帖子指出，该功能是期待已久的补充，并梳理了其在实际应用中的诸多优势：现在我可以在用户停止滚动时准确保存阅读进度，无需再使用不可靠的轮询逻辑…… 在 Safari 尚未支持该事件之前， Stack Overflow 上的相关讨论就曾指出，需要实现跨浏览器兼容的开发者必须借助 polyfill，而 @af-utils/scrollend-polyfill 这类库恰好可以填补这一空白。 scrollend 的实际应用场景十分广泛。 Chrome 开发者博客列举了常见用例，包括同步轮播滚动位置与指示点、在用户停止滚动后懒加载内容、根据最终滚动位置更新界面、用户滚动到新标签页后获取数据，以及记录分析事件。该事件对性能敏感的操作尤为重要。在滚动过程中执行计算密集型任务会影响滚动体验，而 scrollend 提供了理想的时机，可将这类任务延迟到滚动完全结束后再运行。对于仍需支持旧版 Safari 的团队来说，实现渐进增强十分简便。开发者可以通过 onscrollend 检测浏览器支持情况，并在该事件不可用时回退到基于定时器的方案。Polyfill 则提供了另一种方式：浏览器存在原生事件时自动使用，否则回退到指针与滚动事件监听。 MDN 文档提供了完整的示例和兼容性表格清单，并指出该功能目前已获得所有现代浏览器的基线支持。 scrollend 事件是一个可靠、跨平台的 API，用于检测滚动何时完成。它会在浏览器完成滚动动画、用户触摸或指针手势结束、键盘导航完成，以及通过 scrollTo() 等 API 执行程序化滚动结束时触发。该事件同时支持文档级滚动与单个可滚动元素，并能正确处理可视视口交互（如双指缩放）。对于多年来一直使用各种变通方案的 Web 开发者而言，Safari 26.2 对该事件的实现，补齐了自 2023 年 Chrome 114 开始推进的相关标准化工作的最后一块拼图。【声明：本文由 InfoQ 翻译，未经许可禁止转载。】查看英文原文： https://www.infoq.com/news/2026/04/safari-scrollend-support/ 促进软件开发及相关领域知识与创新的传播关于我们我要投稿合作伙伴加入我们关注我们联系我们内容投稿：editors@geekbang.com 业务合作：hezuo@geekbang.com 反馈投诉：feedback@geekbang.com 加入我们：zhaopin@geekbang.com 联系电话：010-64738142 地址：北京市朝阳区望京北路9号2幢7层A701 InfoQ 近期会议北京 · QCon 全球软件开发大会 2026.4.16-18 上海 · AICon 全球人工智能开发与应用大会 2026.6.26-27 全球 InfoQ InfoQ En InfoQ Jp InfoQ Fr InfoQ Br Copyright © 2026, Geekbang Technology Ltd. All rights reserved. 极客邦控股（北京）有限公司 | 京 ICP 备 16027448 号 - 5 京公网安备 11010502039052号 | 产品资质