如何修正JavaScript代码实现视频仅在Viewport（视口）内播放

你的代码核心问题出在视口判断逻辑错误和元素位置计算不准确，导致两个视频被错误地同时触发播放。以下是具体问题和修正方案：

问题分析 #

1. 位置计算错误：使用position().top获取的是元素相对于最近定位父元素的距离，而scrollTop是文档滚动的距离，两者基准不一致，导致位置判断完全偏离。
2. 视口判断逻辑混乱：原条件elementFromTop > 0 && elementFromTop < players[i].top + viewportHeight完全不符合视口交集的判断逻辑，会错误地将所有视频判定为需要播放。
3. 未考虑元素自身高度：只判断元素顶部位置，忽略了视频本身的高度，无法准确判断视频是否进入/离开视口。

修正方案 #

关键修改点 #

• 用offset().top替代position().top，获取元素相对于文档顶部的真实位置。
• 计算元素的底部位置（顶部位置 + 元素自身高度），判断元素与视口是否有交集：
  • 元素顶部 < 视口底部（scrollPos + viewportHeight）
  • 元素底部 > 视口顶部（scrollPos）
• 仅当元素和视口存在交集时播放，否则暂停。

修正后的完整脚本 #

var players = []
$("iframe").each((index, element) => {
  const $el = $(element);
  players.push({
    player: new Vimeo.Player(element),
    top: $el.offset().top, // 改为offset().top获取文档级位置
    height: $el.height(),  // 保存元素自身高度
    status: "paused",
  });
});
var viewportHeight = $(window).height();

$(window).on('scroll', function() {
    var scrollPos = $(window).scrollTop();
    var viewportBottom = scrollPos + viewportHeight;
    
    for(var i=0; i<players.length;i++) {
        const video = players[i];
        const videoBottom = video.top + video.height;
        
        // 正确判断元素是否在视口内（有交集即视为在视口）
        var isInViewport = video.top < viewportBottom && videoBottom > scrollPos;
        var status = isInViewport ? "play" : "pause";   
        
        if(video.status !== status) {
            video.status = status;
            video.player[status]();
            console.log(`视频${i+1}：${status}`);      
        }
    }
});

额外优化建议 #

• 添加防抖处理：滚动事件会频繁触发，添加防抖可以减少不必要的API调用，提升性能：

  let scrollTimer;
  $(window).on('scroll', function() {
      clearTimeout(scrollTimer);
      scrollTimer = setTimeout(() => {
          // 原滚动处理逻辑
      }, 100);
  });
  

• 初始化时执行一次判断：页面加载完成后，直接检查当前视口中的视频是否需要播放，避免用户不滚动时视频一直暂停。

内容的提问来源于stack exchange，提问作者Julius Goddard