Исправление позиции на странице после подгрузки ajax-ом в Chrome
В браузере Chrome начиная с v56 появилась т.н. функция Scroll Anchoring, которая включена по умолчанию.
В результате на всех Chrome-based браузерах на странице с подгрузкой контента (например в Активности) после подгрузки скролл уходит вниз страницы. и подгружаемый контент «уходит» вверх, а не появляется внизу как положено. В итоге теряется смысл этой фичи и чтобы увидеть подгруженный контент, нужно скроллить вверх вручную.
Этот баг воспроизводится и на этом сайте (см. страницу Активность). В Firefox все работает как надо.
Решение:
Достаточно прописать в CSS для родительского контейнера свойство
Для LS 1.0.3:
добавляем сюда свойство
Upd Info:
По сути Scroll Anchoring — это привязка экрана к скроллу, чтобы предотвратить подергивания и скачки, к примеру когда вверху страницы загружаются картинки. Здесь это подробно расписано. Т.е. это новая фича, вызывающая баг при ajax-подгрузке ))
P.S.:
Наверное, самым правильным решением было бы отнимать у скролла высоту добавленного контента...?
Либо подсчитать scrollTop до подгрузки и выставить его после подгрузки
В результате на всех Chrome-based браузерах на странице с подгрузкой контента (например в Активности) после подгрузки скролл уходит вниз страницы. и подгружаемый контент «уходит» вверх, а не появляется внизу как положено. В итоге теряется смысл этой фичи и чтобы увидеть подгруженный контент, нужно скроллить вверх вручную.
Этот баг воспроизводится и на этом сайте (см. страницу Активность). В Firefox все работает как надо.
Решение:
Достаточно прописать в CSS для родительского контейнера свойство
overflow-anchor: none;
.Для LS 1.0.3:
добавляем сюда свойство
overflow-anchor: none;
Upd Info:
По сути Scroll Anchoring — это привязка экрана к скроллу, чтобы предотвратить подергивания и скачки, к примеру когда вверху страницы загружаются картинки. Здесь это подробно расписано. Т.е. это новая фича, вызывающая баг при ajax-подгрузке ))
P.S.:
Наверное, самым правильным решением было бы отнимать у скролла высоту добавленного контента...?
Либо подсчитать scrollTop до подгрузки и выставить его после подгрузки
3 комментария
По сути решение неполноценное. т.к. мы лишаемся новой фичи.
Я попытался вставить сюда
var scroll = $(window).scrollTop();
А после подгрузки опять вернуть это значение
$(window).scrollTop(scroll);
Но почему-то не работает. Может поможете? ;)
Вот бы теперь это «прикрутить» в объекте ajax для всех методов сразу через хуки.