Помощь с динамическим скроллингом в Vue.js

Добрый вечер! У меня веб-приложение с чатом. В нем много сообщений, естественно все загружать сразу не вариант. Написал такой фрагмент кода:

function handleScroll() { const container = messagesContainer.value; if (!container) return;

const scrollTop = container.scrollTop; const containerHeight = container.clientHeight; const scrollHeight = container.scrollHeight;

// Загрузка предыдущих сообщений при прокрутке вверх if (scrollTop < 150 && startIndex.value > 0) { startIndex.value = Math.max(0, startIndex.value - buffer); endIndex.value = startIndex.value + maxVisibleMessages; visibleMessages.value = messageStore.messages.slice(startIndex.value, endIndex.value); }

// Загрузка новых сообщений при прокрутке вниз if (scrollTop + containerHeight > scrollHeight - 150 && endIndex.value < messageStore.messages.length) { endIndex.value = Math.min(messageStore.messages.length, endIndex.value + buffer); visibleMessages.value = messageStore.messages.slice(startIndex.value, endIndex.value); }

// Ограничение количества видимых сообщений if (visibleMessages.value.length > maxVisibleMessages) { if (scrollTop < 150) { // Убираем сообщения снизу, если прокрутка вверх visibleMessages.value = visibleMessages.value.slice(0, maxVisibleMessages); } else { visibleMessages.value = visibleMessages.value.slice(visibleMessages.value.length - maxVisibleMessages); } }}

В Chrome все работает отлично. Да и в целом то везде, кроме Safari. Из-за того, что Safari не поддерживает overflow-anchor: auto. Требуется помощь с реализацией аналога overflow-anchor: auto, или любого другого решения этой проблемы