場(chǎng)景：判斷某個(gè)元素是否出現(xiàn)了可視區(qū)域，根據(jù)是否在可視區(qū)域來(lái)執(zhí)行不同動(dòng)作；

比如第一屏未出現(xiàn)支付按鈕時(shí)，顯示底部懸浮按鈕，當(dāng)頁(yè)面下滑出現(xiàn)支付按鈕，則底部懸浮按鈕消失。

@/utils/index.js

/**
 * 判斷某個(gè)原生DOM元素是否不在屏幕可見(jiàn)區(qū)內(nèi)
 * @param {*} el 原生DOM元素
 */
const isElementNotInViewport = function(el) {
  let rect = el.getBoundingClientRect();
  return (
    rect.top >= (window.innerHeight || document.documentElement.clientHeight) ||
    rect.bottom <= 0
  );
};

export { isElementNotInViewport};

isElementNotInViewport在組件內(nèi)的使用：

import { isElementNotInViewport} from "@/utils/index.js";

  mounted() {
    this.$nextTick(() => {
      let timer;
      window.addEventListener("scroll", () => {
        if (this.isFixed) {
          this.isFixed = false;
        }
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(() => {
          this.handleScroll();
        }, 200);
      });
      this.handleScroll();
    });
  },
  methods: {
      // 滑動(dòng)出現(xiàn)底部按鈕
    handleScroll() {
      if (isElementNotInViewport(this.$refs.lightBtn)) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    },
  }

相關(guān)參考鏈接：
Element.getBoundingClientRect()

只是簡(jiǎn)單小記，如有錯(cuò)誤望指出，互相學(xué)習(xí)，共同進(jìn)步~