原生js获取页面滚动的距离scrollLeft、scrollTop

最新推荐文章于 2024-08-21 11:07:47 发布

每一天，每一步

最新推荐文章于 2024-08-21 11:07:47 发布

阅读量5.4k

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/u010234868/article/details/118499005

版权

JavaScript 页面滚动兼容性处理 scrollLeft scrollTop

关键词由CSDN通过智能技术生成

javaScript 专栏收录该内容

135 篇文章 12 订阅

订阅专栏

<!-- <!doctype html> -->
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body {
			height: 1000px;
		}
	</style>
</head>
<body>

	<script>
		// e.pageX e.pageY IE9+
		// pageY = clientY + 页面滚动出去的距离

		document.onclick = function () {
			// console.dir(document);
			// console.log(document.scrollLeft); // undefined
			// console.dir(document.body);
			// console.log('body.scrollLeft:' + document.body.scrollLeft); // 0
			// console.log('body.scrollTop:' + document.body.scrollTop); // 0

			// documentElement 文档的根元素 html标签
			// console.log(document.documentElement); // <html>...
			// 有些浏览器是使用这两个属性来获取的
			// ? 视频中chrome值为0 0 body...为0 变化值  与自己的结果不符 查到csdn上有说是因为使用了DTD即DOCTYPE声明，注释掉第一行代码后，结果与视频中一致
			// console.log('documentElement.scrollLeft:' + document.documentElement.scrollLeft); // 0
			// console.log('documentElement.scrollTop:' + document.documentElement.scrollTop); // 179

			// 调用兼容性处理函数
			console.log(getScroll());
			// console.log(getScroll().scrollLeft);
			// console.log(getScroll().scrollTop);
		}

		// 处理浏览器兼容性问题
		function getScroll() {
			var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
			var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
			return {
				scrollLeft : scrollLeft,
				scrollTop : scrollTop
			}
		}
	</script>
</body>
</html>