Question

背景

我在React应用程序中使用Intersection Observer来滚动页面时跟踪我所处的类别。我想观察最靠近菜单栏的div。

使其更加精确

为了更好地可视化，我做了一个小屏幕录像。您会看到它在“签名”和“基本”之间切换，不是随机的，但不是我希望它切换的方式。当div几乎与菜单栏对齐时，我希望它切换到菜单栏中的其他项目。

我的屏幕录像：https://www.youtube.com/watch?v=ZF8qbLAQhWQ

如何处理性能

由于我正在使用React，所以当我滚动页面时要更新活动菜单项时，我将更新状态。为此，我使用了他们的新钩子API。

//page height: 1140
//observerMargin: 570
const observerMargin = Math.floor(pageHeight / 2);
const observerConfig = {
    rootMargin: `-${
        pageHeight % 2 === 0 ? observerMargin - 1 : observerMargin
    }px 0px -${observerMargin}px 0px`
};

useEffect(() => {
    const handleIntersection = function(entries) {
        entries.forEach(entry => {
            if (entry.target.id !== activeMenuProdCatId && entry.isIntersecting) {
                setActiveMenuProdCatId(entry.target.id); // setting the state here
            }
        });
    };

    const observer = new IntersectionObserver(handleIntersection, observerConfig);
    observer.observe(refs[menuProductCategory.name].current);

    return () => observer.disconnect();
}, [activeMenuProdCatId, setActiveMenuProdCatId, observerMargin, refs, pageHeight]);

我创建了一个函数，该函数为我要观察的每个div创建一个引用，它由menuProductCategories length的长度决定：

const refs = activeMenu.menuProductCategories.reduce((acc, next) => {
    acc[next.name] = createRef();
    return acc;
}, {});

在JSX中，我给每个div一个引用和一个ID：

<div
    id={menuProductCategory.id}
    ref={refs[menuProductCategory.name]}
>
    ...
</div>

在我的PC上执行此操作时，它工作正常，但是在移动设备中，当我快速滚动浏览页面时，它会滞后。

这些是我面临的问题，希望能得到一些指导。我也希望我已经足够描述性，否则，请告诉我。

谢谢！

使路口观察员更加精确和高效

背景

使其更加精确

如何处理性能

0 个答案: