Мобильный Android Chrome прерывистый медленный прокрутка после "window.scrollTo" с "поведение: гладкий"

Question

В моем приложении React есть список товаров с компонентом pageNav.

Я показываю 8 товаров на странице, поэтому при нажатии на кнопку NextPage (расположенную внизу список), мне нужно прокрутить пользователя обратно вверх, чтобы вы увидели верхнюю часть следующей страницы.

Это связано с тем, что мой ResultList компонент будет в основном выполнять рендеринг синхронно (без вызовов API), чтобы отобразить продукты для следующей страницы. Если я не прокручиваю вас обратно до самого верха, вы увидите нижнюю часть следующей страницы, и это не имеет смысла.

То, как я это делал, когда вы нажимаете на NextPage кнопка:

window.scrollTo({
  top: 0,
  behavior: 'smooth'
});

Я сделал это так, потому что я думаю, что эффект сглаживания держит пользователя на 100% осведомленным о том, что происходит со страницей.

После первой загрузки Chrome ведет себя нормально, вы можете прокручивать вверх и вниз просто отлично. Но после того, как вы нажмете на кнопки PrevPage или NextPage, чтобы перейти к другим продуктам, вы увидите автоматическую плавную прокрутку, которая вернется в верхнюю часть страницы, но с этого момента вы будете крайне изменчивы. и медленный свиток для страницы. Он застревает везде вниз и вверх.

Firefox, кажется, отлично справляется с плавной прокруткой. Даже после нескольких смен страниц пользовательская прокрутка работает нормально.

Это происходит только на мобильном телефоне Chrome. Firefox работает нормально. Safari не тестировался.

Samsung Galaxy A5 2017
Android 8.0.0
Chrome Mobile 79.0.3945.136

Что мне нужно было сделать:

Я убрал эффект прокрутки.

window.scrollTo({
  top: 0
});

А теперь он снова работает нормально, но я потерял плавный эффект при переходах по страницам.

ВОПРОС

Кто-нибудь сталкивался с этой проблемой?

Есть ли обходной путь для этого, чтобы я мог сохранить эффект сглаживания?

Answer 1

У меня точно такая же проблема, но я не имею ни малейшего представления о том, как ее исправить. Давайте посмотрим, может ли кто-то осветить эту проблему. Opera Mobile, похоже, отлично справляется с плавной прокруткой.

Редактировать. Решено:

Я решил это. Вместо использования window.scrollTo вы можете использовать это:

element.scrollIntoView({ 
   behavior: 'smooth' 
});

Выберите первый элемент вашего следующего списка страниц и используйте element.scrollIntoView

PD : Похоже, window.scrollTo это ошибка из Chrome Mobile. Вы можете использовать то, что я сказал вам выше, пока они не решат проблему.