面试题：JavaScript 中如何实现简单的文档滚动动画

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    #target-element {
      opacity: 0;
      transition: opacity 0.5s ease;
    }
  </style>
  <title>Document</title>
</head>

<body>
  <div id="target-element">这是目标元素</div>
  <script>
    const targetElement = document.getElementById('target - element');
    window.addEventListener('scroll', function () {
      const windowHeight = window.innerHeight;
      const targetElementTop = targetElement.getBoundingClientRect().top;
      if (targetElementTop < windowHeight) {
        targetElement.style.opacity = 1;
      }
    });
  </script>
</body>

</html>

关键步骤解释：

获取目标元素：使用 document.getElementById('target - element') 获取到 HTML 页面中 id 为 target - element 的元素，存储在 targetElement 变量中。
监听滚动事件：通过 window.addEventListener('scroll', function () {... }) 监听窗口的滚动事件。每当用户滚动页面时，回调函数就会被触发。
计算元素位置：在滚动事件的回调函数中，使用 window.innerHeight 获取窗口的高度。通过 targetElement.getBoundingClientRect().top 获取目标元素距离视口顶部的距离。
判断并设置动画：检查目标元素距离视口顶部的距离是否小于窗口高度，如果是，则表示目标元素进入了视口，将目标元素的 opacity 样式设置为 1，触发淡入动画。在 CSS 中提前为目标元素设置了 opacity: 0 和 transition: opacity 0.5s ease，使得当 opacity 值从 0 变为 1 时，产生 0.5 秒的淡入过渡动画效果。

星途面试题库

面试题：JavaScript 中如何实现简单的文档滚动动画

知识考点

面试题答案

关键步骤解释：