Question

当滚动通过我的元素时，我想更改状态。在这一刻，它有点奇怪。即，它更改元素底部的状态。为什么会这样？

useEffect(() => {
   const handleScroll = () => {
        if(window.document.documentElement.scrollTop >= about.current.offsetTop && window.document.documentElement.scrollTop < contact.current.offsetTop) {
            setActiveNav(2);
        } else if(window.document.documentElement.scrollTop >= contact.current.offsetTop) {
            setActiveNav(3);
        } else {
            setActiveNav(1);
        }
   };
    window.addEventListener('scroll', handleScroll);
    return () => {
        window.removeEventListener('scroll', handleScroll);
    };
});

Answer 1

您应该查看Intersection Observer (IO)，它是为解决您的问题而创建的。

首先，您必须定义何时触发IO的选项：

var options = {
  rootMargin: '0px',
  threshold: 1.0
}

var observer = new IntersectionObserver(callback, options);

这里我们说元素100％可见时触发callback。然后我们必须给它一些注意的元素：

var target = document.querySelector('.about');
observer.observe(target);

最后，我们定义一旦元素变得可见，应该怎么做：

var callback = function(entries, observer) { 
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
  });
};

您可以执行类似highlight the current section of a navigation

的操作

甚至还有polyfill for supporting older browsers.

滚动通过元素时如何更改状态？

1 个答案: