关闭

原生js获取浏览器获X轴,Y轴的滚动距离

时间: 2018-08-09阅读: 2693标签: 滚动

前端开发中,需要获取浏览器滚动距离的需求,这篇文章主要讲解如何使用原生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是可读属性。



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1000

js禁止页面滚动

发移动端页面的时候有一个很比较常见的需求,在出现弹窗时,禁止滑动弹窗后面的主体页面。如何实现呢,往下看

css隐藏滚动条_基于webkit内容隐藏滚动条的方法总汇

基于webkit内容隐藏滚动条,核心代码是:overflow的值需要设置为auto或者scroll,然后设置::-webkit-scrollbar的display属性为none。当然也可以通过设置滚动条的宽度为0。

原生JS实现图片滚动

黑色盒子是最终显示滚动图像的区域,绿色盒子为其子容器,其宽度要大于黑色外层盒子,这样才能通过设置黑色盒子的scrollLeft实现图像的滚动。最内层的蓝色盒子用于包裹所有滚动的图像

无间歇文字滚动_ 原生js实现新闻无间歇性上下滚动

这篇文章主要介绍使用js实现文字无间歇性上下滚动,一些网站的公告,新闻列表使用的比较多,感兴趣的小伙伴们可以参考一下

css、js实现自定义滚动条的两种方式

一般默认的滚动条会比较丑,我们可以利用css或者js来实现实现自定义滚动条的功能; 下面就整理2种实现方式

H5中滚动到底部的事件

在H5中,我们有这样的需求:例如有列表的时候,滚动到底部时,需要加载更多。可以采用window的滚动事件进行处理,如果滚动是针对整个屏幕而言的(不针对于某个界面小块),那么这个应该是是成立的

如何用js制作滚动文字?

有时候需要展示的文字较多,但是空间较少,为了能充分的利用空间,可以将文字做成自动滚动的方式。例如网页里的新闻。这里用javascript完成这个功能。

html页面滚动加载,可视区域判断

一种情况初始状态下 滚动到在中间区域的时候,这时上半部分看不见的元素就不给字体添加红色

DOM盒模型和位置 client offset scroll 和滚动的关系

在dom里面有几个描述盒子位置信息的值,pading border margin,width height,client;盒模型生产环境一般使用 box-sizing: border-box,效果:width == content.width + pading + border

overflow滚动条如何隐藏?

隐藏滚动条有很多方法,比较简单和直观的方法可以使用::-webkit-scrollbar来完成,这样的话就把box本身的滚动条隐藏了。如果要兼容 PC 其他浏览器

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!