在前端开发中，需要获取浏览器滚动距离的需求，这篇文章主要讲解如何使用原生Js兼容实现获取浏览器获X轴，Y轴的滚动距离。并延伸扩展下我们一些不知道的js知识，希望对你有所帮助。

代码实现：

//获取浏览器X轴，Y轴的滚动距离
function getScrollDistance() {
	var  obj=null
    if (window.pageXOffset  !== undefined){
    	obj={
    		x: window.pageXOffset,//文档在窗口左上角水平方向滚动的像素
            y: window.pageYOffset,//文档在窗口垂直方向滚动的像素
    	} 
     } else if(document.compatMode !== undefined && document.compatMode != 'BackCompat'){
        obj={
            x: document.documentElement.scrollLeft,
            y: document.documentElement.scrollTop,
        }
    } else {
    	obj={
            x: document.body.scrollLeft,
            y: document.body.scrollTop,
        }
    }
    return obj
}
console.log(getScrollDistance())

延伸知识：

1、window.pageXOffset的兼容性

目前window.pageXOffset是不兼容IE8以及之前的老版本，所以这里需要使用document.documentElement.scrollLeft来获取老版本的滚动距离。

2、IE中document.body.scrollLeft会出现为0的情况

经测试发现，document.body.scrolltop在IE中会出现0的返回结果，出现为0的原因主要有：

a、页面头部的声明如下导致: 【取消该声明即可成功获取】

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">

b、用户设置了浏览器的缩放比，如果浏览器缩放比小于100%的时候

3、可以使用scrollX和scrollY来替换pageXOffset、pageYOffset

window.scorllX和window.scrollY同样可以获取滚动距离，效果和上面是等同，但是它们之间的主要区别在于：

scorllX和scrollY是可读属性。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/1000