JS之解决scroll方法不兼容的写法来获取top和left

摘要:
要求:封装兼容的scroll()。返回值为json。使用scroll()。top获取scrollTop要求:封装兼容的scroll()。返回值为json。使用scroll()。left以获取滚动left˂!

需求:封装一个兼容的scroll(),返回值是json,用scroll().top获取scrollTop
需求:封装一个兼容的scroll(),返回值是json,用scroll().left获取scrollLeft

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title></title>
<style type="text/css">
body{
    height: 5000px;
     5000px;
}
</style>
</head>
<body>

<script type="text/javascript">
//设置滚动事件 window.onscroll = function(){
//调用这个方法 console.log(scroll().top); console.log(scroll().left); }
//需求:封装一个兼容的scroll(),返回值是json,用scroll().top获取scrollTop //需求:封装一个兼容的scroll(),返回值是json,用scroll().left获取scrollLeft function scroll(){ //如果这个属性存在,那么返回值应该是0-无穷大 //如果没有返回值是undefined //只要判断不是undefined就可以调用此方法 if (window.pageYOffset !==undefined) { var json = { "top":window.pageYOffset, "left":window.pageXOffset }; return json; }else if (document.compatMode === "CSS1Compat") {//有DTD约束 return { "top":document.documentElement.scrollTop, "left":document.documentElement.scrollLeft }; }else{//没有DTD约束 return { "top":document.body.scrollTop, "left":document.body.scrollLeft }; } //简单写法 // return { // "top":document.body.scrollTop || document.documentElement.scrollTop || document.documentElement.scrollTop, // "left":document.body.scrollLeft || document.documentElement.scrollLeft || window.pageXOffset // }; } </script> </body> </html>

免责声明:文章转载自《JS之解决scroll方法不兼容的写法来获取top和left》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Crypto++入门学习笔记(DES、AES、RSA、SHA-256)有关调用接口的个人理解下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

JS中异常处理的理解

JS里的异常处理 JS的异常捕获与处理可以从它的 try-catch 语法结构说起,具体形式如下: try{ ... //异常的抛出 }catch(e){ ... //异常的捕获与处理 }finally{ ... //结束处理 } 其中,try块: try块包含的是可能产生异常的代码,在这里面直接或者在里面通过调用...

VUE JS 闹钟函数

心跳函数:秒表 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。 setInterval() 方法会不停地调用函数,直到clearInterval()被调用或窗口被关闭。 由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。 clearInterval() 方法可取消由 s...

JS实现搜索模糊匹配

  Js代码 <script type="text/javascript"> var websites = [["1231","账上1","1342333111"],["1232","账上2","452354234234"],["1233","账上3","33333344444"],["1234","账上4","55555555"]...

Magento中调用JS文件的几种方法

一、全局调用方法: 通过该方法每个页面都会引用这个JS文件,除非是类似jQuery这样的系统文件,不然不推荐这种方法。 文件路径:/app/design/frontend/default/Your_Template/layout/page.xml 你会看到很多类似于addJS这样的XML代码,这是magento的优势之一,通过XML来配置文件很方便灵活。...

js动态获取虚拟目录名称 相当于服务端ResolveUrl("")方法

function_GetScriptLocation(){varscriptLocation="";varscriptName="Utility.js";varscripts=document.getElementsByTagName('script');for(vari=0;i<scripts.length;i++){varsrc=scripts...

js正则匹配获取文件名

//获取文件名,不带后缀 var file_name=file_path.replace(/(.*/)*([^.]+).*/ig,"$2"); //获取文件后缀 1.var FileExt=file_path.replace(/.+./,""); 2.var fileExtension = file_path.substring(file_path.l...