CSS «scroll-snap» прыгает для бесконечной прокрутки в Chrome ⇐ Html

[Anonymous]

При использовании бесконечного списка с привязкой к прокрутке позиция прокрутки смещается (экран мигает) при добавлении новых элементов внизу при прокрутке пальцем в Chrome Mobile или при активированном мобильном режиме в Chrome для Windows. Эффект особенно заметен, если удерживать палец или мышь при прокрутке вниз до загрузки нового элемента. Позиция прокрутки перемещается вверх на один элемент.
Пример:

Код: Выделить всё

element = document.querySelector('.scroll-snap-container')
element.addEventListener('scroll', function (e) {
if (element.scrollHeight -
element.scrollTop -
2 * element.getBoundingClientRect().height < 1700) {
let newChild = document.createElement('div')
newChild.className = "scroll-snap-item"
newChild.style.backgroundColor = getRandomColor()
element.appendChild(newChild)
}
})

function getRandomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

Код: Выделить всё

.scroll-snap-container {
overflow: scroll;
width: 550px;
height: 800px;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}

.scroll-snap-item {
scroll-snap-align: start;
scroll-snap-stop: always;
height: 100%;
width: 100%;
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/692 ... -in-chrome