LeeReamond
V2EX  ›  问与答

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

  •  
  •   LeeReamond · Jul 28, 2021 · 1671 views
    This topic created in 1772 days ago, the information mentioned may be changed or developed.

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

    3 replies    2021-07-28 09:34:21 +08:00
    codehz
        1
    codehz  
       Jul 28, 2021 via Android   ❤️ 1
    首先你可以用 element.getBoundingClientRect 拿到位置和大小
    其次你可以用 IntersectionObserver 直接等浏览器帮你检测什么时候出现在屏幕上,露出了多少面积等
    LeeReamond
        2
    LeeReamond  
    OP
       Jul 28, 2021
    @codehz 感谢
    Yrobot
        3
    Yrobot  
       Jul 28, 2021 via Android
    chrome 很久前就已经支持查看当前元素是否和 viewport 重合了。具体 api 跨平台适配,自己看 caniuse
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5857 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 37ms · UTC 02:00 · PVG 10:00 · LAX 19:00 · JFK 22:00
    ♥ Do have faith in what you're doing.