文章目录
- 1、vue2获取滚动条位置
- 2、vue3获取滚动条位置
- 3、解析
- 4、判断是否存在滚动条
1、vue2获取滚动条位置
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;}}};
window方式
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获取滚动条位置
公共部分
import { nextTick, ref, onMounted, onBeforeUnmount } from "vue";let scrollTopVal = ref<number>(0);let isScroll = ref<boolean>(false);
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);});
window方式
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、解析
1、获取指定元素的滚动条值。在
elementUi
组件中需要通过class
获取,因为id
是动态值。
2、使用window
方式时,只能检测到body
或页面窗口的滚动条。然而对于elementUi
的弹窗等组件获取到的滚动条值为0
。
3、addEventListener
第三个参数表示深度监听,在某些场景如果不设置第三个参数值为true
,可能监听不到对应的事件。
4、addEventListener
第二个参数需要一个函数值,可以直接以函数的形式写在里面,但是不推荐这样写。
5、addEventListener
第一个参数便是对应的事件名称,有滚动事件和鼠标事件等其他事件。
6、必须销毁scroll
事件,因为是vue
是单页面应用,如果不销毁,离开该页面后事件依然会存在,影响浏览器的性能,并且在vue3
中直接报错。所以在离开此页面之前应该销毁全局监听事件,可以在组件销毁之前销毁全局监听事件。
4、判断是否存在滚动条
判断是否存在滚动条的需求,在弹窗插件中使用得较多。因为弹窗大多会添加
overflow: hidden;
属性,如果页面超过一屏的话,添加这个属性之后页面会有晃动。
为了增强用户体验,通过判断是否有滚动条而添加margin-left
属性以抵消overflow: hidden;
之后的滚动条位置。
判断竖向滚动条
console.log(el.scrollHeight > el.clientHeight);
判断横向滚动条
console.log(el.scrollWidth > el.clientWidth);
特殊情况
当元素指定
overflow: hidden;
时,不会出现滚动条。所以需要对元素是否应用了overflow: hidden;
进行判断。
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;}}
但是,以上的方法不严谨,当容器产生外边距合并的时候,也是
ele.scrollWidth > ele.clientWidth
。
<div class="box"><h1>子元素内部内容</h1></div>
let box = document.querySelector(".box");// scrollHeight: 63console.log("scrollHeight: " + box.scrollHeight);// clientHeight: 42console.log("clientHeight: " + box.clientHeight);// 是否有滚动条: trueconsole.log("是否有滚动条: ", box.scrollHeight > box.clientHeight);
特殊情况较完美的处理方式
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; }
计算滚动条宽度的方法
因为移动端浏览器的滚动条都是不占据页面宽度的透明样式,所以为了进一步增强用户体验,我们还需要计算滚动条的宽度,根据情况添加合理的
margin-left
值。
新建一个带有滚动条的div
元素,再计算该元素offsetWidth
和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;}