时间戳

首页 > 解决方案 > Mac 中的 Firefox 正在改变滚动事件侦听器怎么样？

javascript - Mac 中的 Firefox 正在改变滚动事件侦听器怎么样？

问题描述

完整的例子在这里：https ://codepen.io/builtbyvern/pen/MWmLgqd?editors=0100

我正在尝试构建一个动画到与滚动到的百分比相匹配的部分的视频。它适用于除 MacOS 上的 Firefox 之外的所有浏览器。

Firefox 似乎正在消除与视频集成的滚动事件。我可以看到它通常在滚动完成或移动非常缓慢后更新。对于那些不想打开 codepen 的人：

const video = document.getElementById('video');
const main = document.querySelector('main')
const viewportHeight = window.outerHeight
const mainDeets = main.getBoundingClientRect()
const scrollyHeight = mainDeets.height
const initialTopOffset = mainDeets.top
const adjustedHeight = scrollyHeight - initialTopOffset
let percentScrolled = 0


// required to get video length
video.onloadedmetadata = () => {
  const videoDuration = video.duration
  let current = video.currentTime

  window.addEventListener('scroll', () => {
    const gbcr = main.getBoundingClientRect()
    percentScrolled = gbcr.top / -adjustedHeight
    
    if (percentScrolled >= 0) {
      video.currentTime = videoDuration * percentScrolled
      
    } 
  })
}

这对我来说是一个很大的麻烦。

标签： javascriptmacosfirefoxhtml5-video

解决方案

推荐阅读