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

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

Сообщение 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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»