1、vue2獲取滾動條位置

document方式

export default {
	name: "demo",
	data() {
		return {
			scrollTopVal: 0,
			isScroll: 0
		};
	},
	mounted() {
		this.$nextTick(() => {
			// 開啟滾動條監(jiān)聽
			document.addEventListener("scroll", this.scrollTop, true);
			
			let elVal = document.getElementsByClassName('el-drawer__body')[0];
			this.isScroll = elVal.scrollHeight > elVal.clientHeight;
		});
	},
	beforeDestroy() {
		document.removeEventListener('scroll', this.scrollTop, true);
	},
	
	methods: {
		scrollTop() {
			let elVal = document.getElementsByClassName('el-drawer__body')[0];
			this.scrollTopVal = elVal.scrollTop;
		}
	}
};

window方式

export default {
	name: "demo",
	data() {
		return {
			scrollTopVal: 0,
			isScroll: 0
		};
	},
	mounted() {
		this.$nextTick(() => {
			// 開啟滾動條監(jiān)聽
			window.addEventListener("scroll", this.scrollTop, true);
			
			let elVal = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
			this.isScroll = elVal.scrollHeight > elVal.clientHeight;
		});
	},
	beforeDestroy() {
		window.removeEventListener('scroll', this.scrollTop, true);
	},

	methods: {
		scrollTop() {
			let elVal = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
			this.scrollTopVal = elVal.scrollTop;
		},
	}
};

2、vue3獲取滾動條位置

公共部分

import { nextTick, ref, onMounted, onBeforeUnmount } from "vue";

let scrollTopVal = ref<number>(0);
let isScroll = ref<boolean>(false);

document方式

onMounted(() => {
	// 監(jiān)聽滾動條位置
	document.addEventListener("scroll", scrollTop, true);
	
	// 設(shè)置對應(yīng)元素的滾動條
	let elVal: any = document.getElementsByClassName('el-drawer__body')[0];
	// 判斷是否存在滾動條
	isScroll.value = elVal.scrollHeight > elVal.clientHeight;
});

// 實(shí)時(shí)滾動條高度
const scrollTop = () => {
	nextTick(() => {
		let elVal: any = document.getElementsByClassName('el-drawer__body')[0];
		scrollTopVal.value = elVal.scrollTop;
	});
};

onBeforeUnmount(() => {
	// 參數(shù)必須和掛載時(shí)保持一致
	document.removeEventListener('scroll', scrollTop, true);
});

window方式

onMounted(() => {
	// 監(jiān)聽滾動條位置
	window.addEventListener('scroll', scrollTop, true);
	
	let elVal: any = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
	isScroll.value = elVal.scrollHeight > elVal.clientHeight;
});

// 實(shí)時(shí)滾動條高度
const scrollTop = () => {
	nextTick(() => {
		let elVal: any = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
		scrollTopVal.value = elVal.scrollTop;
	});
};

onBeforeUnmount(() => {
	// 參數(shù)必須和掛載時(shí)保持一致
	window.removeEventListener('scroll', scrollTop, true);
});

3、解析

1、獲取指定元素的滾動條值。在elementUi組件中需要通過class獲取，因?yàn)?code>id是動態(tài)值。
2、使用window方式時(shí)，只能檢測到body或頁面窗口的滾動條。然而對于elementUi的彈窗等組件獲取到的滾動條值為0。
3、addEventListener第三個(gè)參數(shù)表示深度監(jiān)聽，在某些場景如果不設(shè)置第三個(gè)參數(shù)值為true，可能監(jiān)聽不到對應(yīng)的事件。
4、addEventListener第二個(gè)參數(shù)需要一個(gè)函數(shù)值，可以直接以函數(shù)的形式寫在里面，但是不推薦這樣寫。
5、addEventListener第一個(gè)參數(shù)便是對應(yīng)的事件名稱，有滾動事件和鼠標(biāo)事件等其他事件。
6、必須銷毀scroll事件，因?yàn)槭?code>vue是單頁面應(yīng)用，如果不銷毀，離開該頁面后事件依然會存在，影響瀏覽器的性能，并且在vue3中直接報(bào)錯。所以在離開此頁面之前應(yīng)該銷毀全局監(jiān)聽事件，可以在組件銷毀之前銷毀全局監(jiān)聽事件。

4、判斷是否存在滾動條

判斷是否存在滾動條的需求，在彈窗插件中使用得較多。因?yàn)閺棿按蠖鄷砑?code>overflow: hidden;屬性，如果頁面超過一屏的話，添加這個(gè)屬性之后頁面會有晃動。
為了增強(qiáng)用戶體驗(yàn)，通過判斷是否有滾動條而添加margin-left屬性以抵消overflow: hidden;之后的滾動條位置。

判斷豎向滾動條

console.log(el.scrollHeight > el.clientHeight);

判斷橫向滾動條

console.log(el.scrollWidth > el.clientWidth);

特殊情況

當(dāng)元素指定overflow: hidden;時(shí)，不會出現(xiàn)滾動條。所以需要對元素是否應(yīng)用了overflow: hidden;進(jìn)行判斷。

function hasScrolled(ele, dir = "vertical") {
  // 判斷的方向是否設(shè)置了overflow: hidden;
  let style = window.getComputedStyle(ele);
  if (
    (dir == "vertical" && style.overflowY == "hidden") ||
    (dir == "horizontal" && style.overflowX == "hidden")
  )
    return false;

  // 在判斷完overflow不為hidden后，再通過兩個(gè)屬性來判斷。
  if (dir == "vertical") {
    return ele.scrollHeight > ele.clientHeight;
  } else {
    return ele.scrollWidth > ele.clientWidth;
  }
}

但是，以上的方法不嚴(yán)謹(jǐn)，當(dāng)容器產(chǎn)生外邊距合并的時(shí)候，也是ele.scrollWidth > ele.clientWidth。

<div class="box">
	<h1>子元素內(nèi)部內(nèi)容</h1>
</div>

let box = document.querySelector(".box");

// scrollHeight: 63
console.log("scrollHeight: " + box.scrollHeight);
// clientHeight: 42
console.log("clientHeight: " + box.clientHeight);
// 是否有滾動條: true
console.log("是否有滾動條: ", box.scrollHeight > box.clientHeight);

特殊情況較完美的處理方式

function hasScrolled(ele, dir = "vertical") {
	let eleScroll = dir == "vertical" ? "scrollTop" : "scrollLeft";
	
	// 判斷scroll數(shù)值是否為0，還是其他值
	let result = !!ele[eleScroll];
	// 如果是其他數(shù)值(非0)這表示有滾動條
	// 如果是0，則嘗試移動一下滾動條，判斷是否能夠移動
	if (!result) {
		// 嘗試移動滾動條
		ele[eleScroll] = 1;
		// 再次確認(rèn)數(shù)值
		result = !!ele[eleScroll];
		// 恢復(fù)原位
		ele[eleScroll] = 0;
	}
	
	// 得出結(jié)果
	return result; 
}

計(jì)算滾動條寬度的方法

因?yàn)橐苿佣藶g覽器的滾動條都是不占據(jù)頁面寬度的透明樣式，所以為了進(jìn)一步增強(qiáng)用戶體驗(yàn)，我們還需要計(jì)算滾動條的寬度，根據(jù)情況添加合理的margin-left值。
新建一個(gè)帶有滾動條的div元素，再計(jì)算該元素offsetWidth和clientWidth的差值。文章來源地址http://www.zghlxwxcb.cn/news/detail-640041.html

function getScrollbarWidth() {
	let scrollDiv = document.createElement("div");
	scrollDiv.style.cssText = "width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;";
	document.body.appendChild(scrollDiv);
	let scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
	document.body.removeChild(scrollDiv);
	
	return scrollbarWidth;
}

到了這里，關(guān)于vue+elementUi獲取滾動條位置、判斷是否存在滾動條、addEventListener、removeEventListener、document、window、scroll、client的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！