关于scrollLeft,scrollTop的浏览器兼容性测试_javascript技巧
程序员文章站
2022-04-23 08:53:32
...
今天在修改原群组弹窗的时候,发现弹窗在谷歌浏览器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对象即可.
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对象即可.
上一篇: mongodb下载安装和基本操作
推荐阅读
-
测试IE浏览器对JavaScript的AngularJS的兼容性
-
关于Mozilla浏览器不支持innerText的解决办法_javascript技巧
-
动态创建样式表在各浏览器中的差异测试代码_javascript技巧
-
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路_javascript技巧
-
关于Mozilla浏览器不支持innerText的解决办法_javascript技巧
-
JS中完美兼容各大浏览器的scrolltop方法_javascript技巧
-
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级_javascript技巧
-
关于scrollLeft,scrollTop的浏览器兼容性测试_javascript技巧
-
一份老外写的XMLHttpRequest代码多浏览器支持兼容性_javascript技巧
-
关于递归运算的顺序测试代码_javascript技巧