在滚动到节时更改URL

Question

我使用这段代码在滚动到部分时突出显示导航栏。当我滚动到某个分区时，是否可以立即更改地址栏中的URL？有人能帮我吗？

提前感谢

const [current, setCurrent] = useState('')

const sections = document.querySelectorAll('h3')
const navLi = document.querySelectorAll('nav ul li')

  window.addEventListener('scroll', () => {
    sections.forEach(section => {
      const sectionTop = section.offsetTop 
      if (window.pageYOffset >= sectionTop && (window.pageYOffset + 100) - sectionTop < 200 && current !== section.getAttribute('id')) {
 setCurrent(section.getAttribute('id'))
        
      }
    })
  })

  useEffect(() => {
    navLi.forEach(li => {
      li.classList.remove('test')
      if(li.classList.contains(current)) {
        li.classList.add('test')
      }
    })
  }, [current])

Answer 1

使用交叉点观察者：）使用小borwser窗口在本地尝试此操作。由于CORS/iframe源代码问题，它无法处理StackOverflow代码段，这些代码段在iframe中运行。

<p class="x">Bloop1</p>
<p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p>
<p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p>
<p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p>
<p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p>
<p class="x">Bloop2</p>
<p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p>
<p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p>
<p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p>
<p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p>
<p class="x">Bloop3</p>
<p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p>
<p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p>
<p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p>
<p>Bleep</p><p>Bleep</p><p>Bleep</p><p>Bleep</p>
<script>
  // which elements to keep track of when they scroll into view
  const elements = document.querySelectorAll(".x");

  // this is observing when the element will come into view
  const observer = new IntersectionObserver((x) => {
    // this is just to get an example
    const text = x[0].target.textContent;
    console.log(text);

    // this actually changes the URL
    window.history.pushState(text, "Title", "/" + text);
  });

  // register the observer for each element we are interested in
  elements.forEach((x) => {
    observer.observe(x);
  });
</script>