当前位置：首页 > article >正文

css‘s hover VS mobile

article 2025/2/28 23:29:11

.animation {
  animation: 30s move infinite linear;
  /* &:hover {
    animation-play-state: paused;
  */
}

原本写的好好的，测试说：“移动端点击滚动条，跳转到其他页面后，返回当前页面，滚动条不滚动；可以优化位点击后继续滚动”

哎，改吧！

<div
   // onTouchStart={() => setPause(true)}
   // onTouchEnd={() => setPause(false)}
   onMouseEnter={() => setPause(true)}
   onMouseLeave={() => setPause(false)}
   style={{ animationPlayState: pause ? 'paused' : 'running' }}
>
>...</div>

为了防止测试再提：“在PC端，点击链接跳转到另一个页面，x掉另一个页面，浏览器窗口又回到当前页面，滚动条不滚动” 添加当该页面出现在浏览器窗口时，就让滚动条滚动

  useEffect(() => {
    document.addEventListener("visibilitychange", () => {
      if (document.hidden) {
      } else {
        setPause(false)
      }
    });
  }, [])