Прокрутите таблицу динамического HTML/Java, не перескакивая наверх. ⇐ Python

[Anonymous]

Я создал базовое приложение Flask, чтобы проработать некоторые ключевые концепции, которые мне понадобятся для более крупного проекта, который я запланировал.

Приложение flask запустится и определит, произошло ли определенное событие. Если это так, данные этого события будут сохранены как первый элемент массива с именем «результат». Мой код HTML/Java примет этот «результат» и запишет данные в табличном формате с включенной функцией полосы прокрутки после достижения определенной высоты. Все это работает отлично.

Как я могу изменить свой код HTML/Java, чтобы можно было плавно прокручивать таблицу во время ее динамического обновления? Если я прокрутлю таблицу вниз и произойдет событие добавления нового элемента в таблицу, позиция, до которой я прокрутил таблицу, будет потеряна, и я подпрыгну к началу таблицы.

Я исследовал эту проблему и не смог найти решение. Любая помощь будет принята с благодарностью.

Вот фрагмент моего html-файла:
/* Определение пользовательских стилей полосы прокрутки */ #result::-webkit-scrollbar { ширина: 2ем; } #result::-webkit-scrollbar-track { фон: hsl(120 75% 50% / 1) } #result::-webkit-scrollbar-thumb { фон: hsl(120 100% 20% / 1) } #result::-webkit-scrollbar-thumb:hover { фон: hsl(120 100% 10% / 1) } // Функция для обновления и отображения «результата» функция updateAndDisplayResult() { $.getJSON($SCRIPT_ROOT + '/update', function(data) { вар resultElement = $('#result'); РезультатЭлемент.пустой(); // Очищаем существующий контент, если таковой имеется // Определить таблицу var table = $('').css('border', '1px сплошной черный'); // Перебираем каждый подмассив в 'result' data.result.forEach(function(subArray) { var row = $(''); // Создаем строку для каждого подмассива // Перебираем каждый элемент подмассива subArray.forEach(функция(элемент) { var cell = $('').text(item); cell.css('border', '1px сплошной черный'); // Добавляем границу ячейки row.append(ячейка); }); // Добавляем строку в таблицу таблица.добавление(строка); }); // Обернуть таблицу в элемент div var tableContainer = $('').css({ 'max-height': '570px', // При необходимости отрегулируйте максимальную высоту 'максимальная ширина': '300 пикселей', 'переполнение-y': 'авто' }); tableContainer.append(таблица); resultElement.append(tableContainer); }); } // Функция для периодической проверки флага и обновления содержимого функция автообновления() { setInterval (updateAndDisplayResult, 1000); // 1 секунда } // Инициализируем функцию автообновления updateAndDisplayResult();