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

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

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

CSS-界面滚动时不显示滚动条

::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式,你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:::-webkit-scrollbar — 整个滚动条.::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).

jquery扩展方法:实现模拟Marquee无限循环滚动

在一些网站的公告栏有这样的一个效果,如果有多条公告就会出现上下滚动效果【也叫做跑马灯效果】,这是如何实现的呢?下面通过基于jquery的扩展

vue 无限滚动问题

如今web开发中,无限加载是必需的一项功能,尤其是在移动端开发中,一个列表往往默认只加载10条,想看更多只能逐渐往下翻页。那么今天就看看如何在Vue-Cli中实现这个功能

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

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

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

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

js 禁止/允许页面滚动

passive,设置该属性的目的主要是为了在阻止事件默认行为导致的卡顿。等待监听器的执行是耗时的,有些甚至耗时很明显,这样就会导致页面卡顿。即便监听器是个空函数,也会产生一定的卡顿,毕竟空函数的执行也会耗时

js实现返回顶部效果的方法总结

当页面特别长的时候,用户想回到页面顶部,必须得滚动好几次滚动键才能回到顶部,如果在页面右下角有个返回顶部的按钮,用户点击一下,就可以回到顶部,对于用户来说,是一个比较好的体验。

js实现单张或多张图片持续无缝滚动

想要实现图片持续滚动,既然使用js,就千万不要加css动画、过渡等相关样式,如果想要滚动的平滑一下,可以一像素一像素的感动,则很平滑,如果加了过渡动画,当图片重置为0时,会有往回倒的动画效果,跟预期不符。

前端高性能滚动 scroll 及页面渲染优化

主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动。因为本文涉及了很多很多基础,是我自己学习记录的一个过程,如果上面列出的知识点都了然于胸了,就可以不必往下看了

JS 判断元素是否可以滚动

今天在解决 ios 移动端滚动穿透的问题时遇到一个问题,就是判断元素能否滚动,把这个过程记录下来。以下以纵向滚动为例,横向滚动同理。scrollHeight 是一个元素内容高度的度量,包括由于溢出导致的视图中不可见的内容

点击更多...

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