vue+elementUi obtient la position de la barre de défilement, détermine s'il existe une barre de défilement, addEventListener, removeEventListener, document, window, scroll, client

Annuaire d'articles

1. vue2 obtient la position de la barre de défilement
2. vue3 obtient la position de la barre de défilement
3. Analyse
4. Déterminez s'il existe une barre de défilement

1. vue2 obtient la position de la barre de défilement

mode document

export default {
    
    
	name: "demo",
	data() {
    
    
		return {
    
    
			scrollTopVal: 0,
			isScroll: 0
		};
	},
	mounted() {
    
    
		this.$nextTick(() => {
    
    
			// 开启滚动条监听
			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;
		}
	}
};

mode fenêtre

export default {
    
    
	name: "demo",
	data() {
    
    
		return {
    
    
			scrollTopVal: 0,
			isScroll: 0
		};
	},
	mounted() {
    
    
		this.$nextTick(() => {
    
    
			// 开启滚动条监听
			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 obtient la position de la barre de défilement

Section publique

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

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

mode document

onMounted(() => {
    
    
	// 监听滚动条位置
	document.addEventListener("scroll", scrollTop, true);
	
	// 设置对应元素的滚动条
	let elVal: any = document.getElementsByClassName('el-drawer__body')[0];
	// 判断是否存在滚动条
	isScroll.value = elVal.scrollHeight > elVal.clientHeight;
});

// 实时滚动条高度
const scrollTop = () => {
    
    
	nextTick(() => {
    
    
		let elVal: any = document.getElementsByClassName('el-drawer__body')[0];
		scrollTopVal.value = elVal.scrollTop;
	});
};

onBeforeUnmount(() => {
    
    
	// 参数必须和挂载时保持一致
	document.removeEventListener('scroll', scrollTop, true);
});

mode fenêtre

onMounted(() => {
    
    
	// 监听滚动条位置
	window.addEventListener('scroll', scrollTop, true);
	
	let elVal: any = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
	isScroll.value = elVal.scrollHeight > elVal.clientHeight;
});

// 实时滚动条高度
const scrollTop = () => {
    
    
	nextTick(() => {
    
    
		let elVal: any = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
		scrollTopVal.value = elVal.scrollTop;
	});
};

onBeforeUnmount(() => {
    
    
	// 参数必须和挂载时保持一致
	window.removeEventListener('scroll', scrollTop, true);
});

3. Analyse

1. Obtenez la valeur de la barre de défilement de l'élément spécifié. Elle doit être obtenue dans elementUile composant classcar idil s'agit d'une valeur dynamique.
2. windowLors de l'utilisation de la méthode, seules bodyles barres de défilement de la fenêtre ou de la page peuvent être détectées. Cependant, pour elementUiles fenêtres pop-up et autres composants, la valeur de la barre de défilement obtenue est 0.
3. addEventListenerLe troisième paramètre représente une surveillance approfondie. Dans certains scénarios, si la valeur du troisième paramètre n'est pas définie true, l'événement correspondant peut ne pas être surveillé.
4. addEventListenerLe deuxième paramètre nécessite une valeur de fonction, qui peut être écrite directement sous la forme d'une fonction, mais cela n'est pas recommandé.
5. addEventListenerLe premier paramètre est le nom de l'événement correspondant, y compris les événements de défilement, les événements de souris et d'autres événements.
6. scrollL'événement doit être détruit car il s'agit d' vueune application d'une seule page. S'il n'est pas détruit, l'événement existera toujours après avoir quitté la page, affectant les performances du navigateur, et une erreur sera vue3signalée directement dans l'application. Par conséquent, l'événement d'écoute global doit être détruit avant de quitter cette page, et l'événement d'écoute global peut être détruit avant la destruction du composant.

4. Déterminez s'il existe une barre de défilement

Déterminer si des barres de défilement sont nécessaires est souvent utilisé dans les plug-ins contextuels. Étant donné que la plupart des fenêtres contextuelles ajouteront overflow: hidden;des attributs, si la page dépasse un écran, la page tremblera après l'ajout de cet attribut. Afin d'améliorer l'expérience utilisateur, ajoutez des attributs pour décaler la position suivante de la barre de défilement
en déterminant s'il existe une barre de défilement .margin-leftoverflow: hidden;

Déterminer la barre de défilement verticale

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

Déterminer la barre de défilement horizontale

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

Cas particulier

Lorsque l'élément est spécifié overflow: hidden;, aucune barre de défilement n'apparaît. overflow: hidden;Il est donc nécessaire de juger si l'élément est appliqué .

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

  // 在判断完overflow不为hidden后，再通过两个属性来判断。
  if (dir == "vertical") {
    
    
    return ele.scrollHeight > ele.clientHeight;
  } else {
    
    
    return ele.scrollWidth > ele.clientWidth;
  }
}

Cependant, la méthode ci-dessus n'est pas rigoureuse et cela se produira également lorsque les marges du conteneur sont fusionnées ele.scrollWidth > ele.clientWidth.

<div class="box">
	<h1>子元素内部内容</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);

Le moyen idéal pour gérer des situations particulières

function hasScrolled(ele, dir = "vertical") {
    
    
	let eleScroll = dir == "vertical" ? "scrollTop" : "scrollLeft";
	
	// 判断scroll数值是否为0，还是其他值
	let result = !!ele[eleScroll];
	// 如果是其他数值(非0)这表示有滚动条
	// 如果是0，则尝试移动一下滚动条，判断是否能够移动
	if (!result) {
    
    
		// 尝试移动滚动条
		ele[eleScroll] = 1;
		// 再次确认数值
		result = !!ele[eleScroll];
		// 恢复原位
		ele[eleScroll] = 0;
	}
	
	// 得出结果
	return result; 
}

Comment calculer la largeur de la barre de défilement

Étant donné que les barres de défilement des navigateurs mobiles sont des styles transparents qui n'occupent pas la largeur de la page, afin d'améliorer encore l'expérience utilisateur, nous devons également calculer la largeur de la barre de défilement et ajouter une valeur raisonnable en fonction de la situation margin-left.
Créez un nouvel élément avec une barre de défilement div, puis calculez la différence entre l'élément offsetWidthet l'élément clientWidth.
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;
}