場景：判斷某個元素是否出現了可視區域，根據是否在可視區域來執行不同動作；
比如第一屏未出現支付按鈕時，顯示底部懸浮按鈕，當頁面下滑出現支付按鈕，則底部懸浮按鈕消失。
@/utils/index.js
/**
* 判斷某個原生DOM元素是否不在屏幕可見區內
* @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在組件內的使用：
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: {
// 滑動出現底部按鈕
handleScroll() {
if (isElementNotInViewport(this.$refs.lightBtn)) {
this.isFixed = true;
} else {
this.isFixed = false;
}
},
}
相關參考鏈接：
Element.getBoundingClientRect()
只是簡單小記，如有錯誤望指出，互相學習，共同進步~
