scroll()封装兼容处理获取scrollTop和scrollLeft

最新推荐文章于 2021-11-01 21:33:25 发布

pingwei_deng

最新推荐文章于 2021-11-01 21:33:25 发布

阅读量387

点赞数 1

分类专栏： HTML JS

本文链接：https://blog.csdn.net/pingwei_deng/article/details/82750532

版权

JS 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

HTML

10 篇文章 0 订阅

订阅专栏

本文介绍了网页中滚动条的相关属性及其兼容性封装方法。详细解释了scrollTop、scrollLeft等属性的作用，并提供了一个兼容多种浏览器的封装函数。此外，还讨论了JSON对象的遍历方法及如何判断文档类型。

摘要由CSDN通过智能技术生成

scroll()封装兼容处理获取scrollTop和scrollLeft

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>scroll()封装</title>
	<style>
		body {
			width: 5000px;
			height: 5000px;
		}
	</style>
</head>
<body>
	
</body>
<script>
	// 封装一个兼容的scroll(),返回json。用scroll().top获取scrollTop
	// 封装一个兼容的scroll(),返回json。用scroll().left获取scrollLeft
	window.onscroll = function() {
		console.log(scroll())
	}
	function scroll() {
		//若存在，返回0- 无穷大
		//若不存在，返回undefined
		//理解封装
		if (window.pageYOffset !== undefined) {
			return {
				"top": window.pageYOffset,
				"left": window.pageXOffset
			};
		} else if(document.compatMode === "CSS1Compat") {
			return {
				"top": document.documentElement.scrollTop,
				"left": document.documentElement.scrollLeft
			};
		} else {
			return {
				"top": document.body.scrollTop,
				"left": document.body.scrollLeft
			};
		}

		//简单封装（开发使用）
		// return {
		// 	"top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
		// 	"left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
		// };


	}
</script>
</html>

详解

1.scrollTop、scrollLeft、scrollWidth、scrollHeight详解与注意事项

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>scroll</title>
	<style>
		body {
			height: 1000px;
			width: 1000px;
		}
 		#div1 {
			width: 100px;
			height: 100px;
			padding: 10px; 
			margin-left: 20px;
			border: 1px solid #000;
		}
	</style>
</head>
<body>
	<!-- <div id="div1">
		scrollWidth 
	</div> -->
</body>
<script>
	/* 
	* onscroll 滚动事件 (window.onscroll = function(){})
	* 屏幕没滚动一次，哪怕是只有1像素都会触发这个事件（可以监测屏幕滚动）
	* 只能有一个写多个以最后一个为准，同理(windon.onload)
	*/
	// window.onscroll = function () {
	// 	console.log(11)
	// }


	/*
	* scrollWidth和scrollHeight不包括border和margin
	* scrollWidth = width + padding
	*
	* scrollHeight 如果文字超出盒子，高度为文字高度; 若没有超出则为等于height就加上padding的和
	* IE8以下，不包括IE8为内容高度
	*/

	// var div1 = document.getElementById("div1")
	// console.log(div1.scrollWidth)

	/*
	* scrollLeft和scrollTop
	*  document.body.scrollTop 页面被卷去的部分
	* 未声明DTD(谷歌只认识他)(IE9+ 认识他)  document.body.scrollTop
	* 已声明DTD(IE678只认识他)(IE9+ 任何时候) document.documentElement.scrollTop
	* 火狐/谷歌/IE9+以上 支持的(不管DTD) windom.pageYOffset
	*/

	//兼容性写法
	document.title = document.body.scrollTop || document.documentElement.scrollTop
	document.title = document.body.scrollTop + document.documentElement.scrollTop
	//最全的兼容
	document.title = windom.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop


	// Html基本结构访问方法
	// 获取title、body、head、html标签
	// document.title    文档标题
	// document.head     文档的头标签
	// document.body     文档的body标签
	// document.documentElement  
	//      它表达文档的html标签，也就是说，基本结构中的html标签并不是通过document.html去访问的，而是document.documentElement。
</script>
</html>

2.json和compatMode属性问题

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>json和compatMode属性问题</title>
</head>
<body>
	
</body>
<script>
	var json = {"aaaa": 111,"bbb":222};
	//遍历方法 for...in...(一般数组和dom对象不使用该方法)
	for(var key in json) {
		console.log(key)    //属性
		console.log(json[key])  //值
	}

	/*
	* 判断是否生命DTD
	* document.compatMode === "BackCpCompat" (注意大小写)
	* BackCompat  未声明
	* CSS1Compat  已经声明
	*/
	alert(document.compatMode)
</script>
</html>