padding: 20px

什么是页面跳动？

在浏览网页时，有时会遇到页面跳动的情况。页面跳动指的是当页面内容不足以填满整个浏览器窗口时，当我们从一个页面滚动到另一个页面时，整个页面会突然跳动或抖动。这种跳动或抖动给用户带来了不舒适的体验，并且可能会影响到页面的可用性和易用性。

页面跳动的原因

页面跳动的原因之一是当页面的内容不足以填充整个浏览器窗口时，浏览器会自动隐藏滚动条，从而使页面宽度变窄。当我们从一个页面滚动到另一个页面时，由于页面宽度的改变，整个页面会跳动或抖动。

防止页面跳动的解决方案

为了解决页面跳动的问题，我们可以使用HTML代码来始终显示浏览器滚动条。下面是一种常用的方法，通过设置CSS样式来实现：

在上面的代码中，我们使用了body元素来设置网页内容区域的最小宽度为100%，并设置了纵向滚动条的样式。通过设置min-width: 100%，我们可以确保页面内容区域始终填充整个浏览器窗口的宽度。通过设置-x: hidden，我们可以强制浏览器始终显示纵向滚动条，即使页面内容没有超出视区。

示例说明

为了更好地理解如何使用上述代码防止页面跳动，我们可以创建一个简单的示例。下面是一个示例的HTML代码：

html>
<html>




    
        示例页面
        这是一个示例页面，用于演示如何使用HTML代码始终显示浏览器滚动条以防止页面跳动。
        当页面内容不足以填充整个浏览器窗口时，我们可以使用上述代码来确保页面始终显示滚动条。

在上面的示例中，我们在标签中添加了上述代码。通过设置.content样式，我们定义了一个宽度为1000像素的内容区域，并通过margin: 0 auto和padding: 20px将内容居中并添加了一些内边距。

当我们在浏览器中打开这个示例页面时，即使页面内容不足以填充整个浏览器窗口，页面也不会跳动或抖动。浏览器始终会显示纵向滚动条，以确保用户可以使用滚动条滚动页面内容。

总结

在本文中，我们介绍了如何使用HTML代码始终显示浏览器滚动条以防止页面跳动。通过设置body元素的样式，我们可以确保页面内容区域始终填充整个浏览器窗口的宽度，并强制浏览器始终显示纵向滚动条，从而避免页面跳动的问题。通过示例代码的演示，我们可以更好地理解如何实现这一效果。希望本文对您有所帮助！

vue获取滚动条的滑块

文章目录

1、vue2获取滚动条位置

方式

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);

方式

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、获取指定元素的滚动条值。在组件中需要通过class获取，因为id是动态值。

2、使用window方式时，只能检测到body或页面窗口的滚动条。然而对于的弹窗等组件获取到的滚动条值为0。

3、第三个参数表示深度监听，在某些场景如果不设置第三个参数值为true，可能监听不到对应的事件。

4、第二个参数需要一个函数值，可以直接以函数的形式写在里面，但是不推荐这样写。

5、第一个参数便是对应的事件名称，有滚动事件和鼠标事件等其他事件。

6、必须销毁scroll事件，因为是vue是单页面应用，如果不销毁，离开该页面后事件依然会存在，影响浏览器的性能，并且在vue3中直接报错。所以在离开此页面之前应该销毁全局监听事件，可以在组件销毁之前销毁全局监听事件。

4、判断是否存在滚动条

判断是否存在滚动条的需求，在弹窗插件中使用得较多。因为弹窗大多会添加: hidden;属性，如果页面超过一屏的话，添加这个属性之后页面会有晃动。

为了增强用户体验，通过判断是否有滚动条而添加margin-left属性以抵消: hidden;之后的滚动条位置。

判断竖向滚动条

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

判断横向滚动条

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

特殊情况

ie滚动条样式_ie浏览器没有滚动条_浏览器右边的滚动条无法下拉

当元素指定: hidden;时，不会出现滚动条。所以需要对元素是否应用了: 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. > ele.。

<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);

特殊情况较完美的处理方式

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元素，再计算该元素和的差值。

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;
}

整合营销服务商

padding: 20px

示例页面

您的项目需求