Chrome автоматически скролит вниз страницы

Chome — мой основной браузер и не так давно я столкнулся со странным поведением в этом браузере.

Введение

На главной странице моего блога имеется masonry сетка из 9 карточек и кнопка «Загрузить еще». По нажатию кнопки через ajax добавляется еще 9 карточек.

Странность заключается в том, что chrome после подгрузки карточек оставляет кнопку «Загрузить еще» на той же позиции экрана, что и до загрузки. На малых разрешениямх экрана (когда 9 карточек не влазят в экран) после подгрузки видно только 2–3 последние карточки и требуется скролить наверх, чтобы посмотреть остальные.

Сперва я перепроверил свой код, ошибок не нашёл. Проверил в ie и firefox, в них работает как надо: после загрузки карточек видно первые 2–3 (а не последние). Я подумал, что это баг хрома.

Но это не баг, это фича!

Оказалось, что это Scroll Anchoring — привязка экрана к положению прокрутки, чтобы предотвратить видимые скачки, когда допустим сверху страницы подгружаются картинки. Экспериментальная функция была представлена в Chrome 51 и включена по-умолчанию в Chrome 56.

Вместо тысячи слов

Без Scroll Anchoring:

С Scroll Anchoring:

Сделать как было раньше

Следует добавить CSS свойство к прокручиваемому контейнеру

overflow-anchor: none

Похожие записи

Руководство по Markdown

Markdown - облегчённый язык разметки, созданный с целью написания максимально читаемого и удобного для правки текста, но пригодного для преобразования HTML и другие языки публикаций.

Windows 10. Меню пуск не открывается

В статье рассказывается как в операционной системе Windows 10 починить меню пуск, которое не открывается. Проблема решается с помощью переустановки Windows Apps.

Классы visible-** и hidden-** в Bootstrap 4

Использование классов Bootstrap 4 для скрытия и отображения элементов на разных разрешения (xs, sm, md, lg) устройств при разработке адаптивных страниц