各个浏览器对获取获取窗口滚动条位置和窗口大小没有提供统一的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. 文字超过字符长度 显示… 点点点 jquery

    在 script脚本区域里面定义如下方法 jQuery.fn.limit = function() { var self = $("[limit]"); self.each(fun ...

  2. Obj格式模型 读取

    OBJ文件的结构 在一个OBJ文件中,首先有一些以v.vt或vn前缀开头的行指定了所有的顶点.纹理坐标.法线的坐标.然后再由一些以f开头的行指定每一个三角形所对应的顶点.纹理坐标和法线的索引.在顶点. ...

  3. easyui combobox简单用法

    <script type="text/javascript">var order_pay_type;$(function() { $("#order_pay_ ...

  4. Owe Her

    I owe her too much a wedding, i think i never pay her for it a life,

  5. liunx(centos7 ) 免密码登录

    centos7 1.准备两台机器 如:(A机器) 和  (B机器) A机器 删除(.ssh目录下文件 known_hosts) 2. 对两台机器生成密钥 在  (A机器)上执行命令: [root@iZ ...

  6. c++浅拷贝和深拷贝---14

    原创博文,转载请标明出处--周学伟http://www.cnblogs.com/zxouxuewei/ 1.什么是拷贝构造函数: 拷贝构造函数,又称复制构造函数,是一种特殊的构造函数,它由编译器调用来 ...

  7. SQL Server 2008 清空删除日志文件 130G日志 10秒内变10M

    SQL2005: Backup Log DNName with no_log  '这里的DNName是你要收缩的数据库名,自己注意修改下面的数据库名,我就不再注释了. go dump transact ...

  8. 【笔试面试】神马搜索C++程序猿电话面试

    面试时间:2015.07.15 预约时间:2015.07.14.电话面试前一天,会电话咨询你方面电话面试的时间. 面试环节: 无自我介绍(这是我面试这么多家公司碰到的第一次),直接面试内容. 问题1: ...

  9. 【高级算法】遗传算法解决3SAT问题(C++实现)

    转载请注明出处:http://blog.csdn.net/zhoubin1992/article/details/46910079 1 SAT问题描写叙述 命题逻辑中合取范式 (CNF) 的可满足性问 ...

  10. NetBpm 组织架构(4)

    大牛的杰作,赞一个 转自:NetBPM工作流的架构设计及实现浅析 读前的话:由于本文涉及内容颇多,若有地方读来不很明白,建议先跳过,整体上有个认识后,再回过头来理解.作者认识有限,若有错误,欢迎斧正: ...