IntersectionObserver使用ScrollIntoView闪烁

Question

我正在尝试构建一个自定义输入，您可以通过使用IntersectionObserver和ScrollIntoView 滚动来更改其值

我面临的问题是，当我试图用一种状态控制组件时，它在滚动时开始闪烁。

我在这个沙盒中有一个例子，你可以看到输入用正确的值正确初始化，但当你试图更改它时…滚动事件的开头有一个闪烁。通过按钮重置输入似乎也能正常工作。

我真的不知道如何在每次事件中正确完成更新，因为我对十字路口观察员很陌生

Answer 1

尝试将threshold值设置为1，使其仅在完全超出边界时才会激发。

const observer = new IntersectionObserver(
(entries) => {
const selectedEntry = entries.find(
(e) => Number.parseFloat(e.target.textContent) === value
);
selectedEntry?.target?.scrollIntoView();
entries.forEach((entry) => {
if (!entry.isIntersecting) {
return;
}
!isFirstRender &&
onChange(Number.parseFloat(entry.target.textContent));
});
},
{ threshold: 1 } // changed to 1
);

此外，请按照linter所说的操作，并为useEffect钩子添加适当的依赖项，除非不需要。

Answer 2

如果您正在使用React，您可能会考虑使用React交集观测器。在我的情况下，我可以通过设置选项triggerOnce: true来消除闪烁。