关于scrollLeft,scrollTop的浏览器兼容性测试


Posted in Javascript onMarch 19, 2013

今天在修改原群组弹窗的时候,发现弹窗在谷歌浏览器chrome下的位置跟在别的浏览器下不一样.逐一排查,肯定是在计算窗口位置的时候,少加了scrollTop这个值.在查看源代码的时候发现直接采用

document.documentElement.scrollTop这个,但在chrome下这个值为0.

在有文档声明的情况下,也就是第一行有个dtd声明,标准浏览器认识document.documentElement.scrollTop,可chrome竟然不认识这斯.在没有文档声明的情况下,chrome,safari还是可以读取到scrollTop值.因为chrome是通过document.body.scrollTop获取值的.

解决这个问题:不用去那么麻烦去判断浏览器类别,因为在不同情况下,document.body、document.documentElement都有可能获取到不同的值的特点.问题就很好解决.
在获取浏览器或某div的scrollTop或scrollLeft时,我封装了一个方法:

var ueScroll=(function(){ 
//获取scrollX 
function scrollX(ele){ 
var element=ele || document.body; 
return element.scrollLeft || (document.documentElement && document.documentElement.scrollLeft); 
} 
//获取scrollY 
function scrollY(ele){ 
var element=ele || document.body; 
return element.scrollTop || (document.documentElement && document.documentElement.scrollTop); 
} 
return { 
left:scrollX, 
top:scrollY 
} 
})()

在DEMO中各浏览器获取scrollTop,scrollLeft值差异性调用的方式也很方便简单的,只要跟普通的对象调用方式一样.

这个也可以直接用在textarea或div获取scrollTop,scrollLeft上的,只要后面传进一个dom对象即可.

Javascript 相关文章推荐
Track Image Loading效果代码分析
Aug 13 Javascript
javascript实现促销倒计时+fixed固定在底部
Sep 18 Javascript
基于javascript实现图片懒加载
Jan 05 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 Javascript
js 调用百度分享功能
Feb 27 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
vue中render函数的使用详解
Oct 12 Javascript
微信小程序拖拽排序列表的示例代码
Jul 08 Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 Javascript
微信小程序实现星星评分效果
Nov 01 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
input输入框的自动匹配(原生代码)
Mar 19 #Javascript
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 #Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 #Javascript
jquery写个checkbox——类似邮箱全选功能
Mar 19 #Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
Mar 19 #Javascript
DIV+CSS+JS不间断横向滚动实现代码
Mar 19 #Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 #Javascript
You might like
php封装的验证码类分享
2017/02/26 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
javascript 动态添加表格行
2006/06/22 Javascript
jQuery toggle()设置CSS样式
2009/11/05 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
详解vue父子模版嵌套案例
2017/03/04 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
Angularjs的启动过程分析
2017/07/18 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
Vue关于组件化开发知识点详解
2020/05/13 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
python从入门到精通(DAY 1)
2015/12/20 Python
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
Django ModelForm操作及验证方式
2020/03/30 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
EJB3推出JPA的原因
2013/10/16 面试题
迅雷Cued工作心得体会
2014/01/27 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
JavaScript异步操作中串行和并行
2021/11/20 Javascript