关于scrollLeft,scrollTop的浏览器兼容性测试
更新时间：2013年03月19日 16:10:35 作者：
弹窗在谷歌浏览器chrome下的位置跟在别的浏览器下不一样，接下来介绍下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
}
})()
在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对象即可.
您可能感兴趣的文章:
- 浅谈jQuery页面的滚动位置scrollTop、scrollLeft
- js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
- jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
- JQuery Dialog(JS 模态窗口,可拖拽的DIV)
- js实现拖拽效果
- 百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
- Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性
- 关于js拖拽上传 [一个拖拽上传修改头像的流程]
- javascript支持firefox,ie7页面布局拖拽效果代码
- JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)（2）
相关文章
写了一个layout，拖动条连贯，内容区可为iframe...2007-08-08
有时候我们经常看到有些blog出现一些点击页面出现小红心的效果，很是喜欢，这里就为大家分享一下代码直接引用即可2018-05-05
本篇文章主要是对js日期、星座的级联显示代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
leaflet是领先的开源JavaScript库为移动设备设计的互动地图。接下来通过本文来给大家介绍下leaflet的开发入门教程，需要的朋友可以参考下2016-11-11
这篇文章主要介绍了javascript操作ul中li的方法,可实现鼠标经过li标签项对应改变背景色的功能,涉及javascript鼠标事件及页面元素属性的相关操作技巧,需要的朋友可以参考下2015-05-05
本文介绍了JSscript标签有哪些属性,向HTML页面中插入JavaScript的主要方法,就是使用script>元素.这个元素由Netscape创造并在NetscapeNavigator2中首先实现.后来,这个元素被加入到正式的HTML规范中,下面小编来讲解下JSscript标签有哪些属性,需要的朋友可以参考下2022-01-01
本篇文章介绍了javascript图片懒加载与预加载的分析，详细的介绍了懒加载和预加载的问题，有需要的可以了解一下。2016-10-10
iScroll是我们在做手机网页中常用的滑动控件之一。单说其功能已相当丰富。但个别时候也是会掉坑的，正好这次就遇上了。在android的app中嵌入网页时不少手机会出现一次点击两次触发的现象。经过一段时间的折腾，总算想到了一个还算合理的解决放案。2015-03-03
extend()函数是jQuery的基础函数之一，作用是扩展现有的对象2013-06-06
JS控制CSS样式的方法...2007-10-10
最新评论