scrollIntoView 等待滚动结束执行

scrollIntoView({ behavior: "smooth"}) 是一个原生 JavaScript 方法，用于平滑地滚动页面至指定元素。然而，这个方法本身并不直接提供回调或者 Promise 来通知滚动何时结束。但是，你可以通过监听 scroll 事件并在合适的时机判断滚动是否接近完成来间接实现这一需求。这里有一个常用的方法来监听滚动结束：

function waitForScrollFinish(element, callback) {
    let totalScrollDistance = element.getBoundingClientRect().top;
    let scrollThreshold = 1; // 可根据实际情况调整阈值
    let lastScrollTop;
    let timer;

    const checkScrollEnd = () => {
        clearTimeout(timer);
        const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
        const distanceFromTop = element.getBoundingClientRect().top;

        // 如果滚动距离小于阈值，认为滚动结束
        if (Math.abs(totalScrollDistance - distanceFromTop) <= scrollThreshold) {
            callback();
        } else {
            // 继续监听，使用防抖避免频繁触发
            timer = setTimeout(checkScrollEnd, 10);
        }
        lastScrollTop = currentScrollTop;
    };

    // 开始监听滚动事件
    window.addEventListener('scroll', checkScrollEnd, { passive: true });

    // 触发初始检查
    checkScrollEnd();

    // 为了内存管理，可以在滚动结束后移除监听器
    return function removeListener() {
        window.removeEventListener('scroll', checkScrollEnd);
    };
}

// 使用示例
const myElement = document.querySelector('#my-element');
myElement.scrollIntoView({ behavior: 'smooth' });

// 等待滚动结束
const removeListener = waitForScrollFinish(myElement, function() {
    console.log('滚动结束！');
    // 这里执行你希望在滚动结束后进行的操作
    // ...

    // 清理监听器（可选，取决于你的使用场景）
    removeListener();
});
复制

这段代码定义了一个 waitForScrollFinish 函数，它接受一个元素和一个回调函数作为参数。当滚动接近目标元素时（基于一个预设的阈值），会调用提供的回调函数。同时，为了避免在滚动过程中频繁调用检查逻辑，使用了防抖(debounce)技巧。请注意，这个方法依赖于滚动结束时元素位置的估计，可能在某些复杂滚动场景下不够精确，但适用于多数情况。