源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-11-23 04:05 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:关于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时,我封装了一个方法:
[u]复制代码[/u] 代码如下:
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对象即可.
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部