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

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, или любого другого решения этой проблемы