如何使用 JavaScript 在视频结束后向下滑动页面？

如果你在开发一个网站或者视频播放器，那么你可能需要在视频播放结束后自动向下滑动页面，以便用户更容易看到相关的内容。下面将介绍如何使用 JavaScript 实现这个功能。

添加事件监听器

首先，你需要给视频播放器添加一个事件监听器，用于检测视频是否结束播放。下面是一个示例：

const videoPlayer = document.getElementById('video-player');
videoPlayer.addEventListener('ended', () => {
  // 在视频结束后执行操作
});

上面的代码使用 addEventListener 方法给视频播放器添加了一个 ended 事件监听器。当视频播放结束时，会触发这个事件监听器中的代码块。

获取屏幕高度和滚动高度

当视频播放结束时，我们需要获取屏幕高度和滚动高度，以便向下滑动页面。下面是获取屏幕高度和滚动高度的代码：

const screenHeight = window.innerHeight;
const scrollHeight = document.documentElement.scrollHeight;

上面的代码中，window.innerHeight 返回当前窗口的高度，而 document.documentElement.scrollHeight 返回整个文档的高度，包括滚动部分。我们需要将它们相减，就可以得到我们需要滑动的距离。

滑动页面

最后，我们可以使用 window.scrollTo 方法滑动页面。下面是代码：

const distanceToScroll = scrollHeight - screenHeight;
window.scrollTo({
  top: distanceToScroll,
  behavior: 'smooth'
});

上面的代码中，我们创建了一个 distanceToScroll 变量，它存储了我们需要滑动的距离。然后，我们调用 window.scrollTo 方法，将页面滑动到指定位置。这个方法接收一个对象参数，其中 top 属性是要滑动的距离，behavior 属性可以设置滑动的动画效果，这里我们使用 smooth 让滑动更加平滑。

完整示例代码

下面是完整的示例代码：

const videoPlayer = document.getElementById('video-player');
videoPlayer.addEventListener('ended', () => {
  const screenHeight = window.innerHeight;
  const scrollHeight = document.documentElement.scrollHeight;
  const distanceToScroll = scrollHeight - screenHeight;
  window.scrollTo({
    top: distanceToScroll,
    behavior: 'smooth'
  });
});

这个代码将在视频播放结束后自动向下滑动页面。你可以根据自己的需要修改滑动的距离和动画效果。