Question

我遇到的问题出现在可滚动的div上，而不是整个页面上。如果您已经在可滚动div的顶部并尝试向上滚动，然后立即尝试向下滚动，则它不会向下滚动。如果您等待1-2秒，则可以向下滚动。处于可滚动div底部时的情况相同。如果您尝试向下滚动并立即尝试向上滚动，则您将被卡住。只要您继续向上滚动，它就会卡住，直到您等待1-2秒，然后您才能向上滚动。

-据我所知，此问题仅发生在iPhone X上。我已经在多种Android设备（iPhone 6 Plus）上进行了测试

-这似乎与-webkit-overflow-scrolling有关

-我已经查看了以下问题：Div scrolling freezes sometimes if I use -webkit-overflow-scrolling，它可以帮助我在iPhone 6 Plus上解决此问题，但该问题在iPhone X上仍然存在。

-我正在使用React，但不要相信这仅在React中是一个问题

-刚发现您可以在LinkedIn上重现此问题。不确定是否有帮助。

-我当前正在使用的功能可解决iPhone 6 Plus上的问题：

export default function touchHelper() {
  let lastY = -1;

  const handleTouchMove = (event) => {
    const {currentTarget: {scrollTop, scrollHeight, clientHeight}, touches} = event;
    if (touches.length > 1) {
      return;
    }

    const clientY = event.touches[0].clientY - lastY;
    // If at top and trying to scroll up, or at bottom and trying to scroll down, preventDefault()
    if (
      (scrollTop === 0 && clientY > 0) ||
      (scrollHeight - scrollTop <= clientHeight && clientY < 0)
    ) {
      event.preventDefault();
    }
  };

  const handleTouchStart = (event) => {
    lastY = event.touches[0].clientY;
  };

  return {handleTouchMove, handleTouchStart};
}

-可滚动div上的CSS：

.calendar-container {
  -webkit-overflow-scrolling: touch;
  flex-grow: 1;
  overflow-y: scroll;
  margin-bottom: 80px;
 }

如何修复iPhone X上的div滚动冻结？

0 个答案: