使用JavaScript监听滚动事件，通过window.scrollY或document.documentElement.scrollTop判断滚动条高度，结合video.offsetHeight或video.videoHeight获取视频真实高度，即可实现滚动条高度与视频高度的精准联动，常用于视频随滚动播放或视差效果。
如何用js获取视频的实际高度并同步滚动条位置
很多前端开发者在做视频滚动交互时，首先遇到的问题就是“视频的实际高度”到底怎么取，视频元素在页面上可能被CSS缩放，也可能加载后分辨率和显示尺寸不一致，你直接用video.clientHeight拿到的可能只是当前布局高度，而不是视频内容本身的真实高度，业内专家指出,区分这两个概念是关键。
获取视频显示高度与分辨率的差异
- 显示高度：通过
video.offsetHeight或video.clientHeight获取，受CSS和父容器影响,适合判断滚动条是否滚到视频所在区域。 - 真实分辨率高度：通过
video.videoHeight获取，是视频元数据中的原始高度,适合做等比缩放计算或与滚动位置做精确映射。
多数情况下，你会用video.offsetHeight来判断视频是否进入视口，因为滚动条位置是基于页面布局的，但如果你需要根据视频实际内容高度做滚动进度条，video.videoHeight才是正确的选择。
判断滚动条高度的几种写法
滚动条高度通常用window.scrollY（现代浏览器）或document.documentElement.scrollTop（兼容旧版）来获取，行业共识认为，优先使用scrollY，并添加|| 0兜底：
const scrollTop = window.scrollY || document.documentElement.scrollTop || 0;
scrollY：返回文档垂直滚动距离,支持所有现代浏览器。document.documentElement.scrollTop：在IE和部分旧浏览器中可用。- 文档滚动高度与视口顶部的关系,直接决定了视频元素是否可见。
获取视频高度并判断滚动位置
假设你有一个<video>元素，id为myVideo：
const video = document.getElementById('myVideo');
const videoHeight = video.offsetHeight; // 显示高度
const videoRealHeight = video.videoHeight; // 真实分辨率高度
当你需要监听滚动条位置，判断视频是否完全进入视口或离开视口时，可以结合getBoundingClientRect()：
window.addEventListener('scroll', () => {
const rect = video.getBoundingClientRect();
const scrollTop = window.scrollY || document.documentElement.scrollTop;
const videoTop = rect.top + scrollTop;
const videoBottom = videoTop + video.offsetHeight;
// 现在你可以用scrollTop和videoTop/videoBottom做比较
});
这样你就拿到了视频在页面中的绝对顶部位置和底部位置,可以与当前滚动条高度做精确对比。
判断滚动条高度与视频播放联动的常见场景
当滚动条滚动到视频位置时自动播放，或者根据滚动进度调整视频音量乃至透明度，是实际项目中高频出现的需求,下面两个场景几乎覆盖了多数应用。
滚动条滚动到视频位置时自动播放
这个功能的核心是判断视频是否进入视口，并且滚动条位置是否到达视频的触发点，通常做法是监听滚动事件,计算视频顶部与视口顶部的距离。
function checkVideoVisibility() {
const rect = video.getBoundingClientRect();
const isVisible = rect.top < window.innerHeight && rect.bottom > 0;
if (isVisible) {
video.play();
} else {
video.pause();
}
}
window.addEventListener('scroll', checkVideoVisibility);
需要注意，自动播放策略在多数浏览器中要求视频静音或有用户交互，所以你可能需要先设置video.muted = true，如果滚动条已经滚过视频，但用户再次滚回，视频应该继续播放还是重播？这取决于业务逻辑，你可以通过保存played状态来控制。
根据滚动条位置调整视频尺寸或透明度
另一种常见设计是视频高度与滚动条联动，比如视频随滚动逐渐缩小或透明度变化,这需要将滚动条位置映射到视频的CSS属性上。
- 获取滚动条在视频区域内的进度（0到1之间）。
- 用进度值计算视频的
transform: scale()或opacity。
const progress = (scrollTop - videoTop) / (videoBottom - videoTop);
const clampedProgress = Math.max(0, Math.min(1, progress));
video.style.opacity = 1 - clampedProgress; // 滚动到视频底部时透明度为0
video.style.transform = `scale(${1 - clampedProgress 0.2})`; // 滚动到视频底部时缩小到0.8
这种视觉反馈可以让滚动与视频产生“粘性”效果，提升用户体验，但要注意性能，滚动事件触发频率很高,需要做节流。
视频高度与滚动条联动中的性能优化
滚动事件是高频触发的事件，如果每帧都去获取视频高度、计算DOM位置，很容易造成页面卡顿，尤其是移动端，视频本身已经消耗性能，再叠加滚动监听,需要谨慎处理。
使用节流函数控制滚动事件频率
你可以用requestAnimationFrame或者setTimeout来节流，推荐requestAnimationFrame，因为它与浏览器的绘制周期同步,不会产生额外延迟。
let ticking = false;
window.addEventListener('scroll', () => {
if (!ticking) {
window.requestAnimationFrame(() => {
// 在这里执行滚动逻辑
ticking = false;
});
ticking = true;
}
});
这样无论滚动触发多少次，回调函数每一帧最多执行一次,大大减轻计算负担。
缓存视频高度和位置信息
视频的高度、在页面中的位置在滚动过程中通常不会变化（除非你动态改变了视频尺寸或页面布局），所以你可以在滚动事件外，提前计算并缓存这些值,避免每次滚动都重新计算。
let videoTop, videoBottom, videoHeight;
function cacheVideoPosition() {
const rect = video.getBoundingClientRect();
videoTop = rect.top + window.scrollY;
videoHeight = video.offsetHeight;
videoBottom = videoTop + videoHeight;
}
// 在页面加载和窗口大小变化时重新计算
window.addEventListener('load', cacheVideoPosition);
window.addEventListener('resize', cacheVideoPosition);
滚动事件中直接使用缓存的数值，不再调用getBoundingClientRect(),性能提升明显。
视频高度变化时的重新计算
当视频加载后，或者视频源切换时，video.videoHeight可能会改变，此时需要重新计算真实高度，你可以监听loadedmetadata事件：
video.addEventListener('loadedmetadata', () => {
const realHeight = video.videoHeight;
// 更新缓存或重新计算布局
});
如果视频高度影响页面布局（比如视频采用自适应高度），你还需要在resize事件中重新计算,确保滚动条高度与视频位置的对应关系始终准确。
关于js判断滚动条高度与视频高度的常见问题
滚动条滚动时视频高度获取不准确怎么办？
首先确认你使用的是video.offsetHeight还是video.videoHeight，如果视频尚未加载完成，videoHeight可能为0，需要等待loadedmetadata事件，如果offsetHeight不准确，检查父容器的高度是否被正确设置，特别是使用了padding或border时，clientHeight和offsetHeight的差值就是这些额外空间，CSS动画或变形也会影响offsetHeight，此时可以用getBoundingClientRect().height来获取当前渲染高度。
如何实现滚动条位置与视频播放进度同步？
你需要知道视频的时长（video.duration）和当前播放时间（video.currentTime），当滚动条滚动到视频区域时，根据滚动位置计算出对应的进度百分比，然后设置video.currentTime，但要注意，频繁设置currentTime会触发seek操作，可能造成播放卡顿或跳跃，通常的做法是仅在用户停止滚动时进行同步，可以使用scrollend事件（现代浏览器支持）或配合节流，同步时，确保视频处于暂停状态,避免同时播放和跳转导致异常。
视频高度与滚动条联动方案在移动端兼容性如何？
移动端主流浏览器都支持scrollY和getBoundingClientRect，但视频自动播放策略比桌面端更严格，通常需要用户手势触发或将视频静音。videoHeight在移动端返回的是视频原始分辨率，与显示无关，滚动事件在移动端触发的频率更高，建议使用passive: true注册事件，避免浏览器等待事件处理结果影响滚动流畅度。scrollend事件在iOS Safari上可能不支持，可以改用touchend或setTimeout模拟，总体而言，核心逻辑在移动端表现良好,但需要针对性地处理自动播放和性能节流。
核心结论：通过window.scrollY获取滚动条高度，结合video.offsetHeight或video.videoHeight获取视频高度，再利用getBoundingClientRect计算视频位置，即可实现绝大多数滚动与视频联动的交互需求，注意性能优化和视频加载时机，是保证方案稳定落地的关键。
首发原创文章，作者：王坚，如若转载，请注明出处：https://idctop.com/article/547914.html
