onscroll事件,onresize事件

js获取页面元素高度、宽度

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

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

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

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

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

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

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

网页被卷去的高(ie): document.documentElement.scrollTop;

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

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

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

某个元素的宽度:obj.offsetWidth;

某个元素的高度:obj.offsetHeight;

屏幕分辨率的高:"+  window.screen.height;  
屏幕分辨率的宽:"+  window.screen.width;  
屏幕可用工作区高度:"+  window.screen.availHeight;  
屏幕可用工作区宽度:"+  window.screen.availWidth;

某个元素的上边界到body最顶部的距离:obj.offsetTop;(在元素的包含元素不含滚动条的情况下)

某个元素的左边界到body最左边的距离:obj.offsetLeft;(在元素的包含元素不含滚动条的情况下)

返回当前元素的上边界到它的包含元素的上边界的偏移量:obj.offsetTop(在元素的包含元素含滚动条的情况下)

返回当前元素的左边界到它的包含元素的左边界的偏移量:obj.offsetLeft(在元素的包含元素含滚动条的情况下)

scrollTop, scrollLeft
设置或返回已经滚动到元素的左边界或上边界的像素数。只有在元素有滚动条的时候,例如,元素的 CSS overflow 属性设置为 auto 的时候,这些像素才有用。这些属性也只在文档的< body> 或< html> 标记上定义(这和浏览器有关),并且一起来制定滚动文档的位置。注意,这些属性并不会指定一个< iframe> 标记的滚动量。这是非标准的但却得到很好支持的属性。
onresize 事件会在窗口或框架被调整大小时发生。
window.onresize = function () {}

JavaScript onscroll 事件

当浏览器滚动条滚动时会触发 onscroll 事件,通常情况下指上下滚动条滚动。

需要注意的是,浏览器一旦检测到滚动条发生滚动,就可以触发 onscroll 事件,而无需等到滚动行为结束。

window.onscroll=function(){}

时间: 2024-08-14 18:02:19

onscroll事件,onresize事件的相关文章

关于 Chrome 浏览器中 onresize 事件的 Bug

我在写插件时用到了 onresize 事件,在反复地测试后发现该事件在 Chrome 及 Opera(内核基本与 Chrome 相同,以下统称 Chrome)浏览器打开时就会执行,这种情况也许不能算作 bug 吧,估计他们的工程师认为浏览器打开时也算窗口发生了变化.解决问题之前我搜索了相关内容,确实有关于 Chrome 的 onresize 的问题,但跟我遇到的问题还有很大不同.我把这个问题抽象为以下函数: function init() { alert('a'); window.onresiz

window.onresize 事件笔记

 1.浏览器尺寸变化响应事件 : window.onresize = function(){....} 这里需要注意的是,onresize响应事件处理中,获取到的页面尺寸参数是变更后的参数. // 获取到的是变更后的页面宽度 var currentWidth = document.body.clientWidth; 如果需要使用到变更之前的参数,需要建一个全局变量保存之前的参数(并且记得在onresize事件中刷新这个全局变量保存新的参数值). 2.谷歌浏览器中  window.onresi

window.onresize事件

定义和用法 onresize 事件会在窗口或框架被调整大小时发生. 语法 In HTML: <element onresize="SomeJavaScriptCode"> JavaScript 中: window.onresize=function(){SomeJavaScriptCode}; 实例 window.onresize=function(){ var bHeight = document.body.clientHeight;//网页可见区域高$("#u

JavaScript-4.5 事件大全,事件监听---ShinePans

绑定事件 <input type="bubtton" onclick="javascript:alert('I am clicked');"> 处理事件 <script language="JavaScript" for="对象" event="事件"> ... (事件处理代码) ... </script> 鼠标事件举例 <script language="

《学习笔记》JS事件和事件冒泡

js事件详解 ●一般事件 onclick 鼠标点击时触发此事件 ondblclick 鼠标双击时触发此事件 onmousedown 按下鼠标时触发此事件 onmouseup 鼠标按下后松开鼠标时触发此事件 onmouseover 当鼠标移动到某对象范围的上方时触发此事件 onmousemove 鼠标移动时触发此事件 onmouseout 当鼠标离开某对象范围时触发此事件 onkeypress 当键盘上的某个键被按下并且释放时触发此事件. onkeydown 当键盘上某个按键被按下时触发此事件 o

DDD领域事件与事件总线源码下载

最近在看领域事件的文章.看到了“张占岭”的<DDD~领域事件与事件总线> 原文地址:http://www.cnblogs.com/lori/p/3476703.html 遗憾的是没有提供下载,把文中的代码复制下来但发现不完整.于是决定自己补全代码. 说明:本来只是打算做一次性的测试项目所以没有命名的.其中用XML初始化的代码也被注释了. 下载地址: http://pan.baidu.com/s/1c0DD5eS 梦回周公

IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素

IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素. attachEvent(type,listener); listener函数中的this不是指向执行当前事件的dom而是window切记,感觉这一点IE做的太奇怪了!

三言两语之js事件、事件流以及target、currentTarget、this那些事

厉害了我的哥——你是如此简单我却将你给遗忘   放假前再看某文档,里边提到两个我既熟悉又陌生的概念target.currentTarget,说他熟悉我曾经看到过这两个事件对象的异同处,说他陌生吧?很不巧.正要运用了,吾才发现吾压根就没记住...其实要讲清楚target.currentTarget,我们就不得不说一下事件流这个概念,而要言明事件流,我们也要晓得一下神马是事件以及一些周边生态概念,这三个概念是必须放在一块说,我们才能对能对这部分的知识有很好的理解滴,网上信息太零散,于是乎就有了这篇算

跨浏览器的事件处理程序——事件处理程序、事件对象差异

为了以跨浏览器的方式处理事件,不少开发人员会使用能够隔离浏览器差异的javascript库,本文从事件处理程序.事件对象差异出发,演示开发最适合的事件处理方法 基本名词解析: 事件 用户或浏览器自身执行的某种动作 事件流 从页面中接收事件的顺序,,IE的事件流指的是事件冒泡流,而Netscape Communicator的事件流是事件捕获流 事件冒泡 事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档) 事件捕获 不太具体的节点应该更早接收到事