如何检查视口是否已达到某个 HTML 元素？

【问题标题】：How I could check whether the view port has reached a certain HTML Element?如何检查视口是否已达到某个 HTML 元素？
【发布时间】：2021-04-07 03:04:18
【问题描述】：

我有一个包含图像的样式化组件 div。当用户向下滚动时到达 img 元素时，我想在图像上应用动画。请注意，我在我的项目中使用了 React，更具体地说是 Styled Components。

非常感谢。

【问题讨论】：

标签： javascript html reactjs css-animations styled-components


【解决方案1】：

您可以使用intersection observer API。它克服了使用滚动监听器的性能问题，但在 IE 或旧浏览器中不支持。

有一个很好的 React 包装器：react-intersection-observer

这是一个带有样式组件的示例：

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-04-03
    • 2021-06-03
    • 2017-08-04
    • 2015-09-05
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode