scroll滚动结束事件

分类: 前端开发

2025-08-28

评论: 0

字数: 18423

在一些业务场景下，需要知道scroll滚动结束事件，才能进行一些业务逻辑的处理，比如滚动结束后，给用户一个提示。

浏览器原生支持

当文档视图完成滚动时，会触发 scrollend 事件。当滚动位置没有更多待处理的更新，且用户已完成其手势时，即视为滚动完成。滚动位置更新包括平滑或即时的鼠标滚轮滚动、键盘滚动、滚动吸附事件，或其他导致滚动位置更新的API和手势。像触摸平移或触控板滚动这样的用户手势只有在释放指针或按键后才算完成。如果滚动位置没有改变，则不会触发 scrollend 事件。

代码实现

提示

现在Web浏览器原生，目前除了 Safari 以外，都已经支持了 scrollend 事件。

window.addEventListener('scrollend', function() {
    console.log('滚动结束了')
})

模拟实现

如果不支持 scrollend 事件，使用 scroll 事件模拟

setTimeout实现

提示

因为Scroll Snap最后的重定位浏览器自身有个检测，这个检测事件，应该是350ms（实际运行可能会略微大几毫秒）。

let timer
// 如果不支持 scrollend 事件，使用 scroll 事件模拟
window.addEventListener('scroll', function() {
    console.log('滚动中')
    clearTimeout(timer)
    timer = setTimeout(function() {
        console.log('滚动结束了')
    }, 353) // 需要大于350
})

扩展实现

提示

适合列表形式的

// 获取列表元素
let list = document.getElementById('list')
let children = list.querySelectorAll('.children')
// 遍历列表元素
children.forEach(function (ele, index) {
    // 这块判断的横向滚动，🤔判断纵向更改一下 `left` 就行
    if (Math.abs(ele.getBoundingClientRect().left - list.getBoundingClientRect().left) < 10) {
        console.log('滚动到了第' + (index + 1) + '个')
    } else {
        console.log('此刻的ele元素不是当前定位的元素')
    }
})

代码整合

if ('onscrollend' in window) {
    window.addEventListener('scrollend', function() {
        console.log('滚动结束了')
    })
} else {
    let timer
    // 如果不支持 scrollend 事件，使用 scroll 事件模拟
    window.addEventListener('scroll', function() {
        console.log('滚动中')
        clearTimeout(timer)
        timer = setTimeout(function() {
            console.log('滚动结束了')
        }, 353) // 需要大于350
}