CSS "scroll-snap" 在 Chrome 中跳跃以实现无限滚动

Posted 2023-03-05

【中文标题】CSS "scroll-snap" 在 Chrome 中跳跃以实现无限滚动

【英文标题】：CSS "scroll-snap" jumping for infinite scroll in Chrome

【发布时间】：2021-11-13 13:21:56

【问题描述】：

使用带有滚动捕捉的无限列表时，在 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>

【问题讨论】：

添加新元素时，它会跳跃，因为它有一个高度并立即添加到您的 html 中。也许在底部增加一些边距或在不访问滚动结尾的情况下添加新元素可以解决

滚动高度变化，而容器高度不变。将元素添加到底部不应更改滚动位置。您可以通过禁用 scroll-snap 属性来测试它。正常滚动时，没有任何跳跃或闪烁

【参考方案1】：

如果你使用“overflow-y”属性而不是“overflow”我想问题会解决的。

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

【讨论】：

不幸的是，这并没有改变我的行为，因为在 x 方向上没有任何溢出。我只是在用户停止滚动后才通过将元素插入 DOM 暂时解决了这个问题，但必须有更好的解决方案