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

180 阅读 0 评论 119 点赞

我是靠谱客的博主顺利火，最近开发中收集的这篇文章主要介绍关于scrollLeft,scrollTop的浏览器兼容性测试，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

今天在修改原群组弹窗的时候,发现弹窗在谷歌浏览器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 
} 
})() 