获得浏览器窗口滚动条位置
来源:互联网 发布:求西门子编程电缆 编辑:程序博客网 时间:2024/06/07 03:29
获得窗口滚动条位置与设置滚动位置
在现代浏览器中均可以从 window
对象的 pageXOffset
和 pageYOffset
属性中得到窗口滚动条的位置。
而对于旧版本的 IE (IE8 以及以前) 可以通过 document
上的 documentElement
或者 body
中的 scrollLeft
和 scrollTop
来获得。
而究竟是在 documentElement
上面还是 body
上面,者取决与文档的渲染模式,这可以从 document.compatMode
上获得。如果是在标准模式下则在 documentElement
上获得,否则在 body
上。
所以可以通过下面的函数获得滚动条位置。
function getScrollOffsets(){ if(window.pageXOffset!=null){ return { x:window.pageXOffset, y:window.pageYOffset }; } if(document.compatMode === 'CSS1Compat'){ return { x:document.documentElement.scrollLeft, y:document.documentElement.scrollTop }; }else{ return { x:document.body.scrollLeft, y:document.body.scrollTop }; }}
注意: 在 webkit 内核的浏览器中,目前存在一个 bug 那就是无论在什么渲染模式下,document.documentElement.scrollLeft
与 document.documentElement.scrollTop
都为 0 ,而 document.body.scrollLeft
与 document.body.scrollTop
是正确的值。对于上面的函数,我们先从 window.page[X|Y]Offset
中获得了值,所以最终的结果依然是正确的。另外,这个 bug 在以后可能会被修复。
如何让页面上下左右滚动呢?
这个时候,可以通过设置 scrollTop
和 scrollLeft
来让滚动条滚动到指定位置。至于是 documentElement
还是 body
上面的 scrollTop
和 scrollLeft
这个就要取决于从那个上面可以正确取得滚动位置了。所以不妨像下面这样:
function setScrollOffsets(x,y){ document.documentElement.scrollLeft = document.body.scrollLeft = x; document.documentElement.scrollTop = document.body.scrollTop = y;}
- 获得浏览器窗口滚动条位置
- 获得滚动条卷动位置
- 记录浏览器滚动条位置
- javascript获得滚动条的位置
- Js获得浏览器的基本信息窗口大小,滚动条高度(document对象)
- Js获得浏览器的基本信息窗口大小_滚动条高度(document对象)
- JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸
- JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸
- JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸
- 查询窗口滚动条的位置
- easyui 窗口 滚动条 固定位置显示
- 兼容浏览器获取滚动条位置JS
- 获取浏览器垂直滚动条的位置
- 获取主流浏览器滚动条的位置
- 判断浏览器滚动条的位置
- js 记住浏览器的滚动条位置
- 浏览器窗口中出现滚动条
- 浏览器、窗口、屏幕、滚动条、滚轮事件
- 软工二
- Mysql主从复制报错Last_Errno: 1305
- Android 中 Activity 启动模式
- POJ 1426 Find The Multiple(dfs)
- ScrollView滚动到底部使用的scrollTo和fullScroll方法的异同
- 获得浏览器窗口滚动条位置
- Android 多个Activity间对象共享
- linux中.config,makefile,kconfig
- erlang的类型系统一
- 计算机网络之WireShark与TCP协议
- 自定义控件之写在前面
- Error fetching http://ruby.taobao.com: no such name (http://ruby.taobao.com/specs.4.8.gz)
- 基于STM32与μC/GUI的多路PID控制器
- 工作小记(二)----说说烦心事