vue中检测元素是否滚动到可视区域


检测元素是否滚动到浏览器可视范围,通常在做效果时使用
在这里插入图片描述

方法:
/**
   * 检测元素是否滚动到可视范围
   * @param {*} el 
   */
  isElementNotInViewport: (el) => {
    if (el) {
      let rect = el.getBoundingClientRect();
      return (
        rect.top >=
          (window.innerHeight || document.documentElement.clientHeight) ||
        rect.bottom <= 0
      );
    }
  }
使用:
window.addEventListener('scroll', this.isElementNotInViewport(this.$refs.box))

注意:在页面销毁时需要解绑挂载的scroll事件

Logo

前往低代码交流专区

更多推荐