javascript - 检查 scrollIntoView 是否完成

Question

我在 Angular 的单页应用程序中使用以下函数。当我点击菜单项时，我滚动到相关的 div。

scroll (el) {
    this.sharedService.isClicked.next(true);
    el.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

如何检查元素是否完成滚动？我想避免使用 setTimeout 函数。

Answer 1

希望这对您有帮助..

  var scrollIntoviewCompleted = false;
  var currentVisible = false;
  var onceVisible = false;
  $(window).scroll(function(){
     $.fn.isOnScreen = function(){
        var element = this.get(0);
        var bounds = element.getBoundingClientRect();
        return bounds.top < window.innerHeight && bounds.bottom > 0;
    }
        if ($('.targetdiv').isOnScreen()) {
            currentVisible = true;
            onceVisible =true;
        } 
        else
        {
            currentVisible = false;
        }
        if(onceVisible == true && currentVisible == false){
            scrollIntoviewCompleted = true;
            console.log("scrollIntoViewCompleted");
        }

});