前端怎么判断滚动条滚动到元素第一次出现的位置，然后在出现时播放动画？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 1206 天前的主题，其中的信息可能已经有所发展或是发生改变。

如题，一个疑问是，由于页面是响应式的，放在上面的元素高度不确定，所以即使通过 js 脚本，又怎么知道滚动条已经滚动到下面的元素了呢？

3 条回复 • 2021-07-28 09:34:21 +08:00

codehz

2021-07-28 06:53:42 +08:00 via Android

首先你可以用 element.getBoundingClientRect 拿到位置和大小
其次你可以用 IntersectionObserver 直接等浏览器帮你检测什么时候出现在屏幕上，露出了多少面积等

LeeReamond

2021-07-28 07:34:53 +08:00

@codehz 感谢

Yrobot

2021-07-28 09:34:21 +08:00 via Android

chrome 很久前就已经支持查看当前元素是否和 viewport 重合了。具体 api 跨平台适配，自己看 caniuse