跳到主要内容

1 篇博文 含有标签「判断元素是否可见」

查看所有标签

IntersectionObserver API 用法

· 阅读需 11 分钟
Oxygen
Front End Engineer

当我们说到图片懒加载、页面数据的滚动加载这些体验设计时,一般能够想到基于scroll事件,通过getBoundingClientRect方法获取元素相对于视口偏移量top,来判断元素是否可见,demo 如下

Edit jovial-snowflake-e42869

这种实现方式较为繁琐,但是现在我们有了IntersectionObserver API,可以大大简化这些通过计算元素偏移量来判断可视性的逻辑。