Мобильный Android Chrome прерывистая запаздывающая прокрутка после window.scrollTo с поведением: smooth

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

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

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

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

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

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

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

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

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

Samsung Galaxy A5 2017
Android 8.0.0
Chrome Mobile 79.0.3945.136

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

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

window.scrollTo({
  top: 0
});

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

ВОПРОС

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

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


javascript browser scroll google-chrome mobile-chrome
person cbdeveloper    schedule 24.01.2020    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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

Изменить. Решено:

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

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

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

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

person alexsua    schedule 27.01.2020
comment
Спасибо. Я попробую это, чтобы увидеть, работает ли это для меня тоже! - person cbdeveloper; 27.01.2020
comment
Отлично, это работает! Кстати, в мобильном Firefox на Android этой ошибки нет. Кто-то сообщил об этой ошибке команде хрома? - person mikep; 01.03.2020

arrow_upward
1
arrow_downward

Задержка scrollTo может быть вызвана событием прокрутки по умолчанию. ScrollTo выполняет свою работу и прокручивает, но событие по умолчанию также может прокручиваться. Если у вас есть scrollTo, запускаемый каким-либо слушателем, добавьте к нему пассивный: false и предотвратите значение по умолчанию в своей функции. Мой пример:

window.addEventListener("wheel", (e) => scrollToSection(e), {
  passive: false,
});

const scrollToSection = (e) => {
 e.preventDefault();

 window.scrollTo({
   top: value,
   left: value,
   behavior: "smooth",
 });
};
person Vyost    schedule 07.10.2020