Исправление позиции на странице после подгрузки ajax-ом в Chrome

В браузере Chrome начиная с v56 появилась т.н. функция Scroll Anchoring, которая включена по умолчанию.

В результате на всех Chrome-based браузерах на странице с подгрузкой контента (например в Активности) после подгрузки скролл уходит вниз страницы. и подгружаемый контент «уходит» вверх, а не появляется внизу как положено. В итоге теряется смысл этой фичи и чтобы увидеть подгруженный контент, нужно скроллить вверх вручную.

Этот баг воспроизводится и на этом сайте (см. страницу Активность). В Firefox все работает как надо.

Решение:
Достаточно прописать в CSS для родительского контейнера свойство overflow-anchor: none;.

Для LS 1.0.3:
добавляем сюда свойство overflow-anchor: none;

Upd Info:
По сути Scroll Anchoring — это привязка экрана к скроллу, чтобы предотвратить подергивания и скачки, к примеру когда вверху страницы загружаются картинки. Здесь это подробно расписано. Т.е. это новая фича, вызывающая баг при ajax-подгрузке ))

P.S.:
Наверное, самым правильным решением было бы отнимать у скролла высоту добавленного контента...?
Либо подсчитать scrollTop до подгрузки и выставить его после подгрузки

3 комментария

avatar
Не поленился написать =)
avatar
Хоть как-то разбудить сообщество))
По сути решение неполноценное. т.к. мы лишаемся новой фичи.
Я попытался вставить сюда var scroll = $(window).scrollTop();
А после подгрузки опять вернуть это значение $(window).scrollTop(scroll);
Но почему-то не работает. Может поможете? ;)
avatar
Хотя вот так работает:
this.getMoreAll = function () {
    if (this.isBusy) {
        return;
    }
    var lastId = $('#stream_last_id').val();
    if (!lastId) return;
    $('#stream_get_more').addClass('stream_loading');
    this.isBusy = true;

    var url = aRouter['stream']+'get_more_all/';
    var params = {'last_id':lastId,'date_last':this.dateLast};

    ls.hook.marker('getMoreAllBefore');
    ls.ajax(url, params, function(data) {
        if (!data.bStateError && data.events_count) {
            var scroll = $(window).scrollTop(); // ДОБАВЛЕНО
            $('#stream-list').append(data.result);
            $('#stream_last_id').attr('value', data.iStreamLastId);
            $(window).scrollTop(scroll); // ДОБАВЛЕНО
        }
        if (!data.events_count) {
            $('#stream_get_more').hide();
        }
        $('#stream_get_more').removeClass('stream_loading');
        ls.hook.run('ls_stream_get_more_all_after',[lastId, data]);
        this.isBusy = false;
    }.bind(this));
};


Вот бы теперь это «прикрутить» в объекте ajax для всех методов сразу через хуки.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.