任务：
在触摸设备上，根据当前水平滚动位置，将获得.container.scrollLeft和transform: translateX图像。 .container的宽度大于其.wrapper的宽度。
在这里您可以检查live example。
问题：
图像会移动，但是fps极低。
预期的行为：
快速流畅的运动。
详细说明：
非常感谢您阅读本文！我真的很困惑这个问题。在桌面版本上，我只是将图像位置与onmouseMove事件绑定在一起，一切都很好。但是对于移动版本，我尝试了onTouch事件和本机滚动事件，但是没有按预期运行。我在寻找解决方案或一些可行的示例，却一无所获。所以，我在这里。
在此useEffect中，您将在每个渲染器上添加滚动事件侦听器。因此，随着滚动，它会重新渲染（应有的渲染），但是会多次重新添加侦听器。
useEffect(() => {
handleScroll();
wrapperEl.current.addEventListener("scroll",handleScroll,{
passive: true
});
});
在第一次渲染时（使用[]作为依赖项数组）添加一次侦听器的效率要高得多（并且不太可能导致块状滚动）。您还应该通过返回一个在卸装时将其删除的函数来清理它：
useEffect(() => {
const el = wrapperEl.current;
el.addEventListener("scroll",{
passive: true
});
return () => el.removeEventListener("scroll",handleScroll);
},[]);
这足以使事情顺利进行。如果没有，那么您也可以限制handleScroll的调用-有很多基于钩子的示例可用。