Блог

Я наблюдаю странное поведение и считаю, что могу исключить некоторые распространенные причины. Мне нужно реализовать восстановление положения прокрутки при возврате в одностраничное приложение (в Angular).

Во-первых, я должен сказать, что в течение всего времени, для целей отладки, у меня есть что-то вроде style=»min-height: 8000px !important;» в теле, чтобы быть уверенным, что всегда достаточно места, а область просмотра не короче запрошенной прокрутки.

для history.scrollRestoration установлено значение «вручную»

Я просто вызываю window.scrollTo(0, Y), когда пользователь переходит назад. Иногда это работает отлично, иногда оно прокручивается вверх (и событие прокрутки, генерируемое браузером, также указывает на 0) Я не могу понять, почему это нормально и почему нет/

Код выглядит так

 window.addEventListener('scroll', function (e: any): void {
  console.log('window scrolled to '   window.scrollY);
});

// called with resored Y value
function onNavigateBack(y) {
  console.log("Before "   window.scrollY)
  console.log("Calling scroll to y = "   y)
  window.scrollTo(0, y) 
  console.log("After "   window.scrollY)
}
  

Предположим, что сохраненное значение равно y = 470, чем вывод

 Before ... (there is actual value)
Calling scroll to y = 470
After 470
.... route is initialized there ...
window scrolled to 0
  

Наблюдения

• ни одно другое window.scrollTo, ни window.scroll не вызывается (проверяется путем насмешки над ним)
• когда scrollTo не вызывается, прокрутка вверх в неправильном случае не выполняется -> недопустимая прокрутка вверх является следствием запрошенной прокрутки
• никакое другое событие scoll не запускается
• Chrome и Firefox совместимы, иногда работает понимание

Вопросы есть. Есть идеи, что может вызвать такое поведение? Или что может перехватить прокрутку? Моей первой проблемой было то, что страница просто слишком короткая между рендерингом, но она сохраняется даже при взломе минимальной высоты.

РЕДАКТИРОВАТЬ: кажется, еще одно наблюдение, что успешная прокрутка связана с маленьким Y (например, никогда не терпит неудачу при y = 200) и сбой при большом Y (например, Y> 800 пикселей). Но все же прокрутка диапазона страниц ниже должна прокручиваться до текущего дна. Для меня это не имеет смысла.

Перенос вызова scrollTo в обратный вызов window.requesteAnimationFrame, похоже, устраняет проблему. Хотя я понятия не имею, почему.