javascript scrollTop正解使用方法
2013-11-14 00:00
471 查看
javascript scrollTop 获取滚动条相对于其顶部的偏移(如***自动显示隐藏的“返回顶部”按钮)。在实际应用中经常会遇到以下问题:
document.documentElement.scrollTop在Chrome里总为0
document.body.scrollTop 在IE和firefox里总为0
1、各浏览器下 window.pageYOffset/document.documentElement.scrollTop/document.body.scrollTop的差异
示例:
IE6/7/8:
doctype:
window.pageYOffset:undefined
document.documentElement.scrollTop:100
document.body.scrollTop:0
无doctype:
window.pageYOffset:undefined
document.documentElement.scrollTop:0
document.body.scrollTop:100
Safari/Chrome:
window.pageYOffset:100
document.documentElement.scrollTop:0
document.body.scrollTop:100
Firefox/Opera:
doctype:
window.pageYOffset:100
document.documentElement.scrollTop:100
document.body.scrollTop:0
无doctype:
window.pageYOffset:100
document.documentElement.scrollTop:0
document.body.scrollTop:100
2、获取scrollTop值
完美的获取scrollTop 赋值简写 :
document.documentElement.scrollTop在Chrome里总为0
document.body.scrollTop 在IE和firefox里总为0
1、各浏览器下 window.pageYOffset/document.documentElement.scrollTop/document.body.scrollTop的差异
示例:
window.scroll(0,100) console.log(“window.pageYOffset:”+window.pageYOffset) console.log(“document.documentElement.scrollTop:”+document.documentElement.scrollTop) console.log(“document.body.scrollTop:”+document.body.scrollTop)
IE6/7/8:
doctype:
window.pageYOffset:undefined
document.documentElement.scrollTop:100
document.body.scrollTop:0
无doctype:
window.pageYOffset:undefined
document.documentElement.scrollTop:0
document.body.scrollTop:100
Safari/Chrome:
window.pageYOffset:100
document.documentElement.scrollTop:0
document.body.scrollTop:100
Firefox/Opera:
doctype:
window.pageYOffset:100
document.documentElement.scrollTop:100
document.body.scrollTop:0
无doctype:
window.pageYOffset:100
document.documentElement.scrollTop:0
document.body.scrollTop:100
2、获取scrollTop值
完美的获取scrollTop 赋值简写 :
var scrollTop = window.pageYOffset|| document.documentElement.scrollTop || document.body.scrollTop;
相关文章推荐
- Android逆向中的常用调试方法和使用代码总结
- Swift使用Alamofire上传图片等FormData表单文件的方法
- Groovy探索 使用集合方法,写出更加Groovy风格的代码
- SQL中Case的使用方法(下篇) (转)
- 『转』VC 工具使用和调试方法
- jquery indexOf使用方法
- 使用apply方法实现javascript中的对象继承
- 【java】File类的详解使用方法
- Android中滑屏初探 ---- scrollTo 以及 scrollBy方法使用说明
- ssh-keygen的使用方法
- shell中的各种括号的使用方法
- Bootstrap table的使用方法
- 索引 视图 存储过程和函数 简单理解 以及使用创建方法
- jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法)
- centos7系统默认防火墙Firewall使用方法
- DataTable使用方法
- 使用UpdatePanel,在后台调用alert 的解决方法,
- stream_set_timeout的使用方法
- Kotlin中常见内联扩展函数的使用方法教程
- asp.net DoDragDrop 方法的使用