参考滚动条高度给字体加渐入效果

以下是一个基本的实现渐入效果的示例代码：

<div class="fade-in">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac odio vel nisi faucibus fringilla. Aenean commodo semper nibh, a aliquam nibh mollis at. Nullam imperdiet faucibus quam, vel sagittis leo rhoncus vel. Fusce bibendum euismod lectus, at mollis nunc vestibulum et. Maecenas sit amet lacinia nibh. Sed vitae libero in ipsum interdum bibendum. Donec bibendum justo nec orci lobortis, a lobortis lectus lobortis. Integer maximus velit vel velit ultricies, euismod vehicula sapien cursus.</p>
</div>

.fade-in {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.fade-in.is-visible {
  opacity: 1;
}

const fadeIns = document.querySelectorAll('.fade-in');

function fadeInHandler() {
  fadeIns.forEach(fadeIn => {
    const fadeInTop = fadeIn.getBoundingClientRect().top;
    const fadeInHeight = fadeIn.offsetHeight;

    if (fadeInTop - window.innerHeight < 0 && fadeInTop + fadeInHeight > 0) {
      fadeIn.classList.add('is-visible');
    } else {
      fadeIn.classList.remove('is-visible');
    }
  });
}

window.addEventListener('load', fadeInHandler);
window.addEventListener('scroll', fadeInHandler);

在上面的示例中，我们首先定义了一个 `opacity` 属性为 0 的 `.fade-in` 类，同时设置了一个 `transition` 属性，让其在 1 秒内渐变到 `opacity` 为 1，实现了渐入的效果。

接着，我们通过 JavaScript 获取到所有带有 `.fade-in` 类的元素，并在 `window` 对象上监听 `load` 和 `scroll` 事件，以便在页面加载完毕和滚动时触发一个 `fadeInHandler` 的事件处理函数。

在 `fadeInHandler` 函数中，我们遍历了所有的 `.fade-in` 元素，并获取了它们的顶部位置和高度。然后，根据当前滚动条的位置，判断是否需要将 `is-visible` 类添加到该元素上，以触发渐入效果。

需要注意的是，由于浏览器的性能限制，我们只在该元素的顶部进入视口时触发渐入效果，并没有等到它完全进入视口。如果需要更加精确的判断，可以使用 Intersection Observer API。