试图使用JS突出显示文本

Question

当页面滚动下面标记在下面，我正在尝试突出显示文本，从我在网上发现的内容上标记，代码是这样的。但是看来我做错了什么，我做不到。 请注意，我很新，刚刚开始学习网络开发。

(function(document) {
  const markers = [...document.querySelectorAll('mark')];

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.intersectionRatio > 0) {
        entry.target.style.animationPlayState = 'running';
        observer.unobserve(entry.target);
      }
    });
  }, {
    threshold: 0.8,
  });

  markers.forEach((mark) => {
    observer.observe(mark);
  });
}(document));

.mark {
  --color1: springgreen;
  --color2: springgreen;
  --bg-height: 40%;
  all: unset;
  background-image: linear-gradient(var(--color1) var(--color2));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 var(--bg-height);
  -webkit-animation: highlight 800ms 1 ease-out;
  animation: highlight 800ms 1 ease-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

@-webkit-keyframes highlight {
  to {
    background-size: 100% var(--bg-height);
  }
}

@keyframes highlight {
  to {
    background-size: 100% var(--bg-height);
  }
}

<main>
  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quaerat quas asperiores ut numquam, quidem blanditiis sint explicabo qui amet reiciendis doloremque, minima illo. Repudiandae iste quis nihil itaque porro.</h2>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut aut laudantium ullam! <mark>Tempore sapiente molestiae</mark> nam amet quaerat quisquam doloremque eveniet dolores? Laborum asperiores, obcaecati minima minus qui esse ab?</p>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam sapiente ea alias unde qui mollitia earum pariatur nesciunt incidunt, <mark>tenetur nemo iure aspernatur maiores.</mark> Laboriosam placeat quae eos recusandae explicabo?</p>
</main>

Answer 1

JS代码是对的，您只有2个错误，在CSS代码中，您错过了线性级别声明中的一个逗号，并且您正在设计.mark .mark类，您需要样式标记元素：

const markers = [...document.querySelectorAll('mark')];

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.intersectionRatio > 0) {
      entry.target.style.animationPlayState = 'running';
      observer.unobserve(entry.target);
    }
  });
}, {
  threshold: 0.8,
});

markers.forEach((mark) => {
  observer.observe(mark);
});

p,
h2 {
  margin-bottom: 500px;
}

mark {
  --color1: springgreen;
  --color2: blue;
  --bg-height: 40%;
  all: unset;
  background-image: linear-gradient(var(--color1), var(--color2));
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: 0% var(--bg-height);
  animation: highlight 800ms 1 ease-out;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}

@-webkit-keyframes highlight {
  to {
    background-size: 100% var(--bg-height);
  }
}

@keyframes highlight {
  to {
    background-size: 100% var(--bg-height);
  }
}

<main>
  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quaerat quas asperiores ut numquam, quidem blanditiis sint explicabo qui amet reiciendis doloremque, minima illo. Repudiandae iste quis nihil itaque porro.</h2>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut aut laudantium ullam! <mark>Tempore sapiente molestiae</mark> nam amet quaerat quisquam doloremque eveniet dolores? Laborum asperiores, obcaecati minima minus qui esse ab?</p>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam sapiente ea alias unde qui mollitia earum pariatur nesciunt incidunt, <mark>tenetur nemo iure aspernatur maiores.</mark> Laboriosam placeat quae eos recusandae explicabo?</p>
</main>

如果您想对滚动事件进行更详细的控制，例如，您可能想恢复动画，添加其他行为等其他行为等...我建议您尝试 gsap scrolltrigger 插件事情要比直接操纵CSS和交叉观察者要容易得多。