获取当前scrollTop和scrollLeft，兼容XHTML


 1 // JavaScript Document

 2 /*  用法与测试:

 3     var myScroll = getScroll();

 4     alert("myScroll.scrollTop:" + myScroll.scrollTop);

 5     alert("myScroll.scrollLeft:" + myScroll.scrollLeft);

 6 */

 7 function getScroll(){

 8         var scrollTop,scrollLeft;

 9         scrollTop = (document.body.scrollTop > document.documentElement.scrollTop) ? document.body.scrollTop : document.documentElement.scrollTop;//兼容浏览器

10

11         if(isNaN(scrollTop) || scrollTop < 0){ scrollTop = 0;};//如果获取到非数字或者是小于0，那么等于0

12

13         scrollLeft = (document.body.scrollLeft > document.documentElement.scrollLeft) ? document.body.scrollTop : document.documentElement.scrollLeft;

14

15         if(isNaN(scrollLeft) || scrollLeft < 0){ scrollLeft = 0;};

16

17         return{scrollTop:scrollTop,scrollLeft:scrollLeft};

获取当前scrollTop和scrollLeft，兼容XHTML,码迷,mamicode.com

时间： 2024-10-24 02:11:09

获取当前scrollTop和scrollLeft，兼容XHTML的相关文章

js-事件1_获取鼠标坐标clientX+scrollLeft及兼容性写法_跟随鼠标移动的divs

一.获取鼠标坐标 clientX:鼠标到可视区边缘的距离:    scrollLeft:滚动条到页面顶端的距离(不可视区的距离) 兼容性写法: var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;      var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; 跟随鼠标移动的divs,

jQuery页面的滚动位置scrollTop、scrollLeft

Web页面常常比显示该页面的浏览器窗口还要大,因为Web文档具有很多内容,往往会导致页面比浏览器还要高,有时候甚至还要宽,这迫使访问者通过滚动来查看整个页面(如图10-8所示).当访问者滚动页面的时候,一部分文档会从视线中消失.例如,Web页面不能完全放入浏览器窗口中,文档会向左或向上滚动,因此,页面的顶部和左边都会消失在视野之内.这意味着浏览器窗口的左上角和文档的左上角并不相同.如果试图放置一个新元素,例如,屏幕顶部的一个动态Banner:而如果只是试图将元素的left和top位置设置为0,将

DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理

事件对象——兼容处理 1 /* 2 * 功能: 事件对象兼容 3 * 参数: 表示常规浏览器的事件对象e 4 */ 5 function getEvent(e) { 6 7 // 如果存在e存在,直接返回,否则返回window.event 8 return e || window.event; 9 } 获取事件所对应的目标——兼容处理 1 /* 2 3 * 功能: 获取事件所对应的目标 4 5 * 参数: 表示常规浏览器的事件对象e 6 7 */ 8 9 function getTargetBy

jQuery-css()、height()、width()、offset()、position()、scrollTop()、scrollLeft()

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 200px; height: 200px; position: relative; border:1px solid

终于搞懂scrollTop, offsetTop, scrollLeft, offsetLeft......

补充说明 上面的图已经标记的已经很明显了,我再稍微补充几点: offsetTop, offsetLeft:只读属性.要确定的这两个属性的值,首先得确定元素的offsetParent.offsetParent指的是距该元素最近的position不为static的祖先元素,如果没有则指向body元素.确定了offsetParent,offsetLeft指的是元素左侧偏移offsetParent的距离,同理offsetTop指的是上侧偏移的距离. offsetHeight, offsetWidth:只

浅谈jQuery页面的滚动位置scrollTop、scrollLeft

Web页面常常比显示该页面的浏览器窗口还要大,因为Web文档具有很多内容,往往会导致页面比浏览器还要高,有时候甚至还要宽,这迫使访问者通过滚动来查看整个页面(如图10-8所示).当访问者滚动页面的时候,一部分文档会从视线中消失.例如,Web页面不能完全放入浏览器窗口中,文档会向左或向上滚动,因此,页面的顶部和左边都会消失在视野之内.这意味着浏览器窗口的左上角和文档的左上角并不相同.如果试图放置一个新元素,例如,屏幕顶部的一个动态Banner:而如果只是试图将元素的left和top位置设置为0,将

JS获取非行间样式及兼容问题

获取非行间样式: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取非行间样式</title> <style> #div1{height: 200px;width: 200px;background-color: red;} </style> <script> fun

JavaScript 获取元素样式属性以及兼容代码封装

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } div { width: 300px; height: 200px; background-color: pink; left: 100px; } <

offsetWidth、clientWidth、scrollWidth、scrollTop、scrollLeft等属性图示

注释1:上图整个大背景是这个网页的全部尺寸,中间的小框才是浏览器中的可见尺寸.这幅图就是针对为文档(document)的各个height.width.top.left所做的说明. --------------------------------------------------------------------------------- 注释2:第二幅图主要是针对网页中一个div的各个属性值所做的说明."DIV element client area"是这个div元素的可见区域,&