js监听滚动条获取距离顶部高度值

六月初六月初 JavaScipt 2023-08-13 17:20:27

页面中滚动条的存在可以使超出页面展示区域的内容正常展示，也使得有限的范围内能展示更多的内容。

本文介绍通过js如何实现对滚动条的滚动监听，通过对滚动条距离顶部高度的监听可以使页面变得更加丰富和个性化。

如：距离顶部指定高度后，开始展示内容等操作。

获取滚动条距离顶部高度，这里需要了解scrollY和pageYOffset属性。

    window.scrollY：返回文档在垂直方向已滚动的像素值。

    window.pageYOffset：pageYOffset 属性是 scrollY 属性的别名。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body style="height: 1000px;">
		<script>
		    window.onload = function () {
		        window.onscroll = function (e) {
		            var scrollTop = window.scrollY || window.pageYOffset;
					console.log(scrollTop)
		        }
		    }
		</script>
	</body>
</html>

页面加载完成后，启用滚动监听效果。通过滚动监听实时获取滚动条距离顶部的高度。

本文介绍的只是基于原生js的相关获取方法，更多关于jq后续文章中更新。

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！