4

When using an infinite list with scroll-snapping, the scroll position seems to jump (the screen flashes) when adding new elements at the bottom while swipe-scrolling in Chrome Mobile or with the mobile mode activated in Chrome for Windows. The effect is especially visible when holding down the finger or mouse while swipe-scrolling down until a new element is loaded. The scroll position jumps up one element.

Example:

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%;
    }
<div class="scroll-snap-container">
    <div class="scroll-snap-item" style="background-color: red"></div>
    <div class="scroll-snap-item" style="background-color: green"></div>
</div>
Jonas Märtens
  • 63
  • 6
  • When new element added, It will jumps because ıt has a height on it and adds immediately to your HTML. Maybe bringing some margin to bottom or adding new element without accessing end of the scroll is solves – Muhammedogz Sep 19 '21 at 14:40
  • The scroll height changes while the containers height is constant. Adding an element to the bottom shouldn't change the scroll position. You can test this by disabling the scroll-snap attribute. With normal scrolling, nothing jumps or flashes – Jonas Märtens Sep 19 '21 at 14:57

1 Answers1

0

If you use the "overflow-y" property instead of "overflow" I guess the problem will be solved.

.scroll-snap-container {
        overflow-y: scroll;
        width: 550px;
        height: 800px;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
    }
oktaytan
  • 51
  • 5
  • Unfortunately that doesn't change the behaviour for me as there isn't any overflow in the x direction anyway. I temporarily solved the problem by inserting elements into the DOM only after the user has stopped scrolling, but there's got to be a better solution – Jonas Märtens Sep 20 '21 at 08:24