兼容性的scroll方法

最新推荐文章于 2021-04-28 09:54:06 发布

ikun不解释

最新推荐文章于 2021-04-28 09:54:06 发布

阅读量578

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： scroll

本文链接：https://blog.youkuaiyun.com/qq_42309685/article/details/97558148

javascript 专栏收录该内容

134 篇文章

订阅专栏

本文介绍了一种封装scroll方法以提高浏览器兼容性的技术方案。通过将window.pageXOffset、document.body.scrollTop和document.documentElement.scrollTop等属性封装成JSON，实现了一个统一的scroll方法，便于后续调用。该方法针对不同浏览器的兼容性差异进行了解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为了封装一个兼容性好的scroll方法，代码如下：(事先对body进行了处理，使它的宽和高都很高大)

//由于scroll等属性的兼容性性过太差，所以打算将他们封装成一个json，以后也方便调用
window.onscroll = function (){
	console.log(scroll().left);
	console.log(scroll().top);
}
function scroll() {
	return {
		"top":window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
		"left":window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
	}
}
//分解就是下面这些代码
//function scroll() {
//	if(window.pageYOffset !== undefined){
//		return {
//			"left": window.pageXOffset,
//			"top":window.pageYOffset
//		}
//	}else if(document.compatMode === "CSS1Compat"){
//		return {
//			"left":document.documentElement.scrollLeft,
//			"right":document.documentElement.scrollTop
//		}
//	}else{
//		return {
//			"left": document.body.scrollLeft,
//			"Top":document.body.scrollTop
//		}
//	}
//}
</script>

效果如下：
返回scroll值