各个浏览器对获取获取窗口滚动条位置和窗口大小没有提供统一的API,以下是对其封装,解决兼容性问题

/**
 * 获取浏览器视口的大小(显示文档的部分)
 *
 */
function getViewPortSize(){
    // 除IE8及更早的版本以外的浏览器
    if( window.innerWidth != null ){
        return {
            w : window.innerWidth,
            h : window.innerHeight
        }
    }
    // 标准模式下的IE
    if( document.compatMode == "css1Compat" ){
        return {
            w : document.documentElement.clientWidth,
            h : document.documentElement.clientHeight
        }
    }
    // 怪异模式下的浏览器
    return {
        w : document.body.clientWidth,
        h : document.body.clientHeight
    }
}

/**
 *  获取窗口滚动条的位置
 */
function getScrollOffset(){
    // 除IE8及更早版本
    if( window.pageXOffset != null ){
        return {
            x : window.pageXOffset,
            y : window.pageYOffset
        }
    }
    // 标准模式下的IE
    if( document.compatMode == "css1Compat" ){
        return {
            x : document.documentElement.scrollLeft,
            y : document.documentElement.scrollTop
        }
    }
    // 怪异模式下的浏览器
    return {
        x : document.body.scrollLeft,
        y : document.body.scrollTop
    }
}

原生js--兼容获取窗口滚动条位置和窗口大小的方法的更多相关文章

  1. js获取窗口滚动条高度、窗口可视范围高度、文档实际内容高度、滚动条离浏览器底部的高度

    1.获取窗口可视范围的高度 //获取窗口可视范围的高度 function getClientHeight(){ var clientHeight=0; if(document.body.clientH ...

  2. html通过css,js实现div悬浮效果总汇,如原生JS实现滚动到一定位置实现div悬浮

    在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为f ...

  3. JS打开新窗口防止被浏览器阻止的方法

    这篇文章主要介绍了JS打开新窗口防止被浏览器阻止的方法,分析对比了常用方法与改进方法,是非常实用的技巧,需要的朋友可以参考下 本文实例讲述了JS打开新窗口防止被浏览器阻止的方法.分享给大家供大家参考. ...

  4. JS打开新窗口防止被浏览器阻止的方法[转]

    本文实例讲述了JS打开新窗口防止被浏览器阻止的方法.分享给大家供大家参考.具体分析如下: 用传统的window.open()方式打开新窗口,会被浏览器阻止,那么,我们如何才能让JS打开新窗口不被浏览器 ...

  5. 原生JS中获取位置的方案总结

    获取鼠标当前位置 clientY.clientX: 鼠标当前位置 相对于 浏览器可视区域顶部.浏览器可视区域左部 的位置: pageY.pageX: 鼠标当前位置 相对于 文档顶部.文档左部的位置: ...

  6. js中获取窗口高度的方法

    取窗口滚动条滚动高度 function getScrollTop() { var scrollTop=0; if(document.documentElement&&document. ...

  7. 原生js中获取this与鼠标对象以及vue中默认的鼠标对象参数

    1.通过原生js获取this对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  8. Java: 获取当前执行位置的文件名/类名/方法名/行号

    在 JAVA 程序有时需要获取当前代码位置, 于是就利用 Thread.currentThread().getStackTrace() 写了下面这个工具类, 用来获取当前执行位置处代码的文件名/类名/ ...

  9. 原生JS和JQ窗口定位属性对照表

    位置 javascript jquery 兼容性 窗口位置离屏幕左偏移 var leftPos = (typeof window.screenLeft == "number") ? ...

随机推荐

  1. TensorFlow-tensorboard可视化

    运行了很多次出现错误,错误原因在于运行tensorboard时,需要退出python编辑

  2. [原创]解决jQuery.live在mobile safari(iphone / ipad / ipod)绑定失败的问题

    解决方案: 给要使用live绑定事件的元素,添加“cursor:pointer”样式即可! 如: a,input,td{cursor:pointer;} 原文链接:http://bugs.jquery ...

  3. SpringMVC使用@ResponseBody时返回json的日期格式及可能产生的问题

    http://blog.csdn.net/z69183787/article/details/40375831 遇到的问题: 1 条件: 1.1.表单里有两个时间参数,都是作为隐藏项随表单一起提交: ...

  4. mysql 直接拷贝data 目录下文件用不的解决方案

    innodb 的表,直接复制文件是无法使用的,会提示 table doesn’t exists ,在复制的时候,应将data目录下的 ibdata1 文件一并复制过去,并且删除 ib_logfile0 ...

  5. 安装 运行yum报错:No module named yum

    报错情况: There was a problem importing one of the Python modulesrequired to run yum. The error leading ...

  6. 关于测试中哪些信息需要放到jira上面

    1.每个新需求的功能点,全部在jira上一一呈现 2.每个bug也一样在jira上一一呈现 3.任务一个需要优化改进的点也一一在jira上呈现 然后程序员一直开发新功能和修改新bug,测试人员负责bu ...

  7. python带参装饰器的改良版

    简单点就是这种 def deco2(param=1): def _deco2(fun): def __deco2(*args, **kwargs): print (param) fun(*args, ...

  8. OpenVPN多处理之-多队列TUN多实例

    两年前我以前提到了多个OpenVPN共享一个tun虚拟网卡,旨在降低管理开销和切换开销,由于我讨厌在外面对一大堆网卡做Bridge或者Bonding,除了初衷不同,其实的关于TUN的进展一直没有偏离我 ...

  9. mongodb 搭建主从服务器

    mongodb 主从配置比较简单,只需要在启动的时候添加参数(-master.-slave -source IP:PORT). Ubuntu 16.04 系统环境 监听端口分别为:27010.2701 ...

  10. Lottie 动画库

    强大的动画库,且同时支持 android.ios.react native 和 web http://airbnb.io/lottie/