document.body.scrollTop以及一些备忘

网页可见区域宽:document.body.clientWidth;

网页可见区域高: document.body.clientHeight;

网页可见区域宽: document.body.offsetWidth (包括边线的宽);

网页可见区域高: document.body.offsetHeight (包括边线的宽);

网页正文全文宽: document.body.scrollWidth;

网页正文全文高: document.body.scrollHeight;

网页被卷去的高: document.body.scrollTop;

网页被卷去的左: document.body.scrollLeft;

网页正文部分上: window.screenTop;

网页正文部分左: window.screenLeft;

屏幕分辨率的高: window.screen.height;

屏幕分辨率的宽: window.screen.width;

屏幕可用工作区高度: window.screen.availHeight;

屏幕可用工作区宽度:window.screen.availWidth;

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标

offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由

offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由

offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

要获取当前页面的滚动条纵坐标位置,用: document.documentElement.scrollTop;而不是: document.body.scrollTop;

documentElement 对应的是 html 标签,而 body 对应的是 body 标签。

在标准w3c下,document.body.scrollTop恒为0,需要用document.documentElement.scrollTop来代替;

如果你想定位鼠标相对于页面的绝对位置时,你会发现google里面1000篇文章里面有999.99篇会让你使用 event.clientX+document.body.scrollLeft,event.clientY+document.body.scrollTop, 如果你发现你的鼠标定位偏离了你的想象,请不要奇怪,这是再正常不过的事情。

ie5.5之后已经不支持document.body.scrollX对象了。所以在编程的时候,请加上这样的判断 if (document.body && document.body.scrollTop && document.body.scrollLeft)

{ top=document.body.scrollTop; left=document.body.scrollleft; }

if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft)

{ top=document.documentElement.scrollTop; left=document.documentElement.scrollLeft; }

转载于:https://www.cnblogs.com/shoupifeng/archive/2012/08/16/2641913.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274662.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使命召唤ios_使命召唤的精巧UI:战地

使命召唤iosWith over 50 million players worldwide it’s safe to say Warzone has become a global sensation. Featuring cross-platform play, multiple game modes, customisation and wealth of features too long to mention here — it’s captured its audience and …

深入浅出 package.json,目测大多数人不了解它

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

图片旋转代码

http://code.google.com/p/jqueryrotate/wiki/Examples转载于:https://www.cnblogs.com/booth/archive/2012/08/16/2642163.html

鲸鱼网络连接_登陆鲸鱼:在网络上读书,第1部分

鲸鱼网络连接I don’t know when it was I started using the text of Moby Dick in my workshops and talks. Likely it dates back to some of my earliest explorations of web typography. Since it’s out of copyright, it’s one those texts you can find online in va…

2022年值得使用的 Node.js 框架

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

更改apk安装包对android系统等级要求

此篇文章解决的为问题: █问题1.系统等级与apk等级不匹配. █问题2.更改api等级后的签名问题. 1.工具准备: 解压缩tool.zip文件夹: 2.开始反编译apk安装包 3.切换目录到tool目录下: 4.反编译: apktool.bat d 待编译apk目录名 存放编译后的文件目录 apktool.bat d Onenote_v14.…

推荐一个前端技术选型神器!真好用~

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

静态原型设计 加载中_见解1:原型设计有助于填补静态设计留下的空白。

静态原型设计 加载中In April 2015, I joined the Disney Parks creative team to design mobile experiences for the happiest place on Earth. I learned a lot from a diverse group of humble, creative, and smart people.2015年4月,我加入了迪士尼公园创意团…

tar 压缩与解压缩打包命令

tar [-cxtzjvfpPN] 文件与目录 参数: -c :建立压缩文件的参数命令(creat的意思) -x :解压缩文件的参数命令 -t :查看tar包里文件的命令特别注意,在使用参数时,c/x/t只能有一个,不能同时存在 因为不可能同时压缩与解压缩…

最优资产组合步骤_重新设计投资组合网站之前,请按照以下5个步骤进行操作

最优资产组合步骤The portfolio website is one of the most important assets for a designer. Without it, it can be tough to find your next job or client.作品集网站是设计师最重要的资产之一。 没有它,很难找到下一份工作或客户。 The temptation is high …

裁员潮之下,13次面试拿下字节前端岗offer!

|前言很多粉丝私信,这两个月求职没有往年那么好跳,还有不少粉丝已经收到公司的“优化”通知下面分享一位粉丝的最近的面试经历,在疫情裁员潮的环境下,经历了成长、膨胀、闭关打磨等一系列的跌宕起伏,最终拿下字节总包5…

hdu 1754/zstu 3121 I Hate It(线段树)

http://acm.hdu.edu.cn/showproblem.php?pid1754 http://acm.zstu.edu.cn:8080/JudgeOnline/showproblem?problem_id3121 (1)线段树的基本操作:建树,查询,更新。 (2)重新写一遍时,…

sketch放入app组件_使用Sketch App设计CSS网格

sketch放入app组件首先定义您的网格 (Start by defining your grid) Sketch has 2 built-in layout features — Layout and Grid. In most cases, layout is a great way to organize content on a typical website utilizing a 12 column grid. However for this exercise we…

鲜为人知的CSS实用技巧

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

猎鹰spacex_我如何重新创建SpaceX仪表板UI

猎鹰spacexA couple of weeks ago, SpaceX Crew Dragon launched from Kennedy Space Center to transport astronauts Robert L. Behnken and Douglas G. Hurley to the ISS. Lots of things were revolutionary about this launch, but the one that caught my attention was…

Base64 编码原来这么简单

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

spring事物 设计模式_是什么使事物变得美丽,以及如何在设计中使用它

spring事物 设计模式What do you think about the phrase “beautiful design”? You like it, don’t care or does it make you wince?w ^帽子你想想那句“美丽的设计”? 您喜欢它,不在乎还是让自己畏缩了? For many, “beautiful” is …

直接插入排序(Straight Insertion Sort)

将一个数组,按当前元素的大小,插入到前面已经排好序的数据中的适当位置中,依次直到全入插入完全.下面是一个数组在经过插入排序时的变化情况(t表次数times)Init---{7, 4, 3, 2, 5, 6, 1} 初始t1----{4, 7, 3, 2, 5, 6, 1} 将第1个元素按其大小插到前面排好序的数列的相应位置…

历时一个月!50+Vue经典面试题详解,值得收藏!

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

页面滚动时触发图片逐帧播放_如何在滚动效果上创建逐帧运动图像

页面滚动时触发图片逐帧播放A step by step guide on how to create that dynamic image background you see everywhere.有关如何创建随处可见的动态图像背景的逐步指南。 内容 (Content) Introduction 介绍 Result demo 结果演示 Prerequisite 先决条件 Step by step guide …