javascript - 检查 scrollTo 是否完成

Question

我有一个可滚动的元素。我还有一个滚动到特定位置的功能。我想在 scrollTo 完成时调用一个函数。

Plunkr example

var x = document.querySelector('.container');
$scope.scrollTo = function() {
  x.scrollTo({
    top: 300 ,
    behavior: 'smooth'
  });
};

 // do something when scrollTo is finished

Answer 1

通过检查我要滚动到的元素的位置并将其与容器的当前滚动位置进行比较，您可以看到滚动操作何时完成。

function isScrollToFinished() {
        const checkIfScrollToIsFinished = setInterval(() => {
            if (positionOfItem === scrollContainer.scrollTop) {
                // do something
                clearInterval(checkIfScrollToIsFinished);
            }
        }, 25);
}

间隔检查滚动容器的位置是否等于我要滚动到的元素的位置。然后做一个 Action ，清除间隔。