3

使用带有滚动捕捉的无限列表时，在 Chrome Mobile 中滑动滚动或在 Chrome for 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%;
    }
<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>

4

1 回答 1

0

如果您使用“overflow-y”属性而不是“overflow”，我想问题将得到解决。

.scroll-snap-container {
        overflow-y: scroll;
        width: 550px;
        height: 800px;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
    }
于 2021-09-19T22:20:49.970 回答