关于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 相关文章推荐
JavaScript去除空格的几种方法
Oct 03 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
Mar 31 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
JS通过相同的name进行表格求和代码
Aug 18 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
Nov 16 Javascript
jQuery实现下拉加载功能实例代码
Apr 01 Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 Javascript
jquery实现吸顶导航效果
Jan 08 jQuery
js实现日历
Nov 07 Javascript
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 和 HTML
2006/10/09 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
php实现的简单检验登陆类
2015/06/18 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
PHP chr()函数讲解
2019/02/11 PHP
Js可拖拽放大的层拖动特效实现方法
2015/02/25 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
form+iframe解决跨域上传文件的方法
2016/11/18 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
python 字典 setdefault()和get()方法比较详解
2019/08/07 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
python 读取串口数据的示例
2020/11/09 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
董事长秘书工作职责
2014/06/10 职场文书
学习型党组织心得体会
2014/09/12 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
对Keras自带Loss Function的深入研究
2021/05/25 Python
简单介绍Python的第三方库yaml
2021/06/18 Python
python获取对象信息的实例详解
2021/07/07 Python