JQuery в новой версии Хрома функция append работает по другому

Question

В новой версии браузера Хром (84.0.4147.89), функция append() (библиотеки JQuery), работает по другому, из-за чего возникли неудобства. Раньше при добавлении этой функцией новых элементов (полученных ajax-запросом) в конец контейнера, положение экрана оставалось на месте, теперь положение экрана смещается в конец добавленных элементов. Теперь по точнее. Есть сайт вопросов и ответов nolvoprosov.ru, в конце списка вопросов имеется кнопка "Показать еще (40)", при нажатии на которую к списку добавляются новые вопросы (методом append), но теперь в новой версии Хрома положение экрана перемещается в самый низ, и посетителю приходится мотать наверх и искать начало новой "партии" вопросов. Еще вчера подобное происходило и на сервисе "Ответы@Мейл", но сегодня проблему исправили. Подскажите, как можно решить этот вопрос? Вот упрощенный код:

$(document).on('click', '.btn_show_more', function() {
    
    var contentBlock = $('.list_box');
    ...

    ajaxSend('/function/ajax/get_list.php?type=more', dataSend, 'external').then(function(dataReturn) {

        var list = dataReturn['list'];
        ...
        contentBlock.append(list);
                     
    });
    
});

Проблема наблюдается только в Хроме и только в новой версии. Пробовал на другом компьютере, то же самое. Пробовал на чистом JS:

el = document.getElementsByClassName('list_box');
el[0].innerHTML += list;

Проблема не решилась.

Вот создал упрощенную ситуацию на JSFiddle, где все видно: https://jsfiddle.net/4kfmsdn9/1/ Когда откроете, нажмите на кнопку "Показать еще", браузер добавит новые строки, и перекинет Вас в самый конец. В настройках необходимо отключить "Console in the editor (beta)", чтобы видеть кнопку.

Очень прошу помогите кто знает.

Answer 1

Используйте css-свойство overflow-anchor. Источник ответа тут

$('button').click(function(){
  $('li').clone().appendTo('ol');
})

body{
  overflow-anchor: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ol>
<button>Добавить ещё</button>

Можно возвращаться к исходному значению scrollTopпри помощи js

$('button').click(function(){
  var scroll = $(window).scrollTop();
  $('li').clone().appendTo('ol');
  $(window).scrollTop(scroll);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ol>
<button>Добавить ещё</button>

БЛОГ НА HUSL

JQuery в новой версии Хрома функция append работает по другому

Ответы (1 шт):