尝试使用 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 代码是正确的，您在 CSS 代码中只有 2 个错误，您在 linear-gradient 声明中遗漏了一个逗号，并且您正在设计 .mark class，而您需要设置 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 和 Intersection Observer 更容易。

尝试使用 JS 突出显示文本

Trying to highlight a text using JS

javascript

html

text

highlight

visual-web-developer