Как исправить зависание div прокрутки на iPhone X? - PullRequest
Новая
       8

Как исправить зависание div прокрутки на iPhone X?

0 голосов
/ 29 ноября 2018

У меня проблема с прокручиваемым div, а не со всей страницей.Если вы уже находитесь в верхней части прокручиваемого элемента div и пытаетесь прокрутить вверх и сразу же пытаетесь прокрутить вниз, он не будет прокручиваться вниз.Если вы подождете 1-2 секунды, вы можете прокрутить вниз.То же самое, когда вы находитесь в нижней части прокручиваемого div.Если вы попытаетесь прокрутить вниз и сразу попытаетесь прокрутить вверх, вы застряли.Пока вы продолжаете прокручивать вверх, он застревает до тех пор, пока вы не подождете 1-2 секунды, а затем вы можете прокрутить вверх.

- Насколько я могу судить, эта проблема возникает только на iPhone X.Я тестировал на нескольких устройствах Android iPhone 6 Plus

. Это связано с -webkit-overflow-scrolling

.если я использую -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};
}

- И CSS, который у меня есть на прокручиваемом div: 

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