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

2021-07-28 06:23:17 +08:00
 LeeReamond

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

977 次点击
所在节点    问与答
3 条回复
codehz
2021-07-28 06:53:42 +08:00
首先你可以用 element.getBoundingClientRect 拿到位置和大小
其次你可以用 IntersectionObserver 直接等浏览器帮你检测什么时候出现在屏幕上，露出了多少面积等
LeeReamond
2021-07-28 07:34:53 +08:00
@codehz 感谢
Yrobot
2021-07-28 09:34:21 +08:00
chrome 很久前就已经支持查看当前元素是否和 viewport 重合了。具体 api 跨平台适配，自己看 caniuse

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/792167

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX