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

This topic created in 1935 days ago, the information mentioned may be changed or developed.

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

3 replies • 2021-07-28 09:34:21 +08:00

codehz

Jul 28, 2021 via Android

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

LeeReamond

Jul 28, 2021

@codehz 感谢

Yrobot

Jul 28, 2021 via Android

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