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

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

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



原生JS实现图片滚动

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

css虚线边框滚动效果

常常看到一种酷炫的效果,鼠标hover一片区域后,区域显示出虚线边框,并且还有线条动画,那么这种效果具体是怎么实现的呢,本文提供了几种思路仅供参考。

CSS 实现隐藏滚动条同时又可以滚动

移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动?使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚动的特性。于是想到了自定义滚动条的伪对象选择器::-webkit-scrollbar。

三种方式实现平滑滚动页面到顶部的功能

最近开发公司的公众号H5,做了一个点击icon滚动到顶部的功能。实现功能比较简单,直接调用window.scrollTo(0, 0),一行代码完成。但是作为一个攻城狮,怎么可能对自己要求这么低,所以我给自己加了个需求

vue使用keep-alive保持滚动条位置的实现

简单介绍,使用keep-alive的时候,返回前一页,没有保持滚动条位置。事实上,就算不使用keep-alive,位置也没有被记录。但是,在不使用keep-alive的时候,页面内容会刷新,所以就随他去了……就是这么任性……

js禁止页面滚动

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

实现移动端信息无缝滚动

这篇文章主要教大家如何简单实现js无缝滚动效果。这种实例在网页中其实还挺常见的。注意:内容的高度必须大于容器的高度,否则无法滚动

使用elementUI滚动条之横向滚动

这里要简单的设置一下,将标签的height设为100%,读者查看效果的时候,会出现一个横向的滚动条,如果你不想要横向的滚动条,使用下面css属性设置就可以只显示竖向滚动条。

CSS让页面平滑滚动

在PC浏览器中,网页默认滚动是在<html>标签上的,移动端大多数在<body>标签上,业界浏览器的CSS reset都可以加上这么一条规则:凡是需要滚动的地方都加一句scroll-behavior:smooth就好了!

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

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

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

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全