各个浏览器对获取获取窗口滚动条位置和窗口大小没有提供统一的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. EF5+MVC4系列(11)在主视图中用Html.RenderPartial调用分部视图(ViewDate传值);在主视图中按钮用ajax调用子action并在子action中使用return PartialView返回分布视图(return view ,return PartialView区别)

    一:主视图中使用Html.RenderPartial来调用子视图(注意,这里是直接调用子视图,而没有去调用子Action ) 在没有使用母版页的主视图中(也就是设置了layout为null的视图中), ...

  2. Wings 3D

    Wings 3D 编辑 Wings 3D 是一个开源的三维计算机图形软件.使用翼边数据库.注重于多边形建模,构思取与 Izware 的 Nendo 和 Mirai.支持多种操作系统,包括 Linux. ...

  3. 在Centos7下发布.NET CORE项目[转]

    1.安装安装前准备开发环境 编译类库:yum -y install gcc make gcc-c++ openssl-devel 系统信息: CentOS Linux release 7.2.1511 ...

  4. SpringCloud 集锦

    一.SpringCloud和Dubbo SpringCloud整合了一套较为完整的微服务解决方案框架,而Dubbo只是解决了微服务的几个方面的问题. content Dubbo SpringCloud ...

  5. PHP数组排序函数array_multisort()函数详解(一)

    PHP中array_multisort可以用来一次对多个数组进行排序,或者根据某一维或多维对多维数组进行排序. 关联(string)键名保持不变,但数字键名会被重新索引. 输入数组被当成一个表的列并以 ...

  6. Yii2 中cookie的用法(2)

    设置Cookie PHP setcookie("name", "Larry", time()+3600); Yii2 $cookies = Yii::$app- ...

  7. linux下配置SS5(SOCK5)代理服务

    安装sock5所需依赖开发库: # yum install pam-devel openldap-devel openssl-devel 下载并解压安装sock5 # wget http://down ...

  8. ASP利用xhEditor编辑器实现图片上传的功能。

    本人这几天在做一个软件,无意中用到xhEditor在线编辑器,这个编辑器虽然看着比较简单,但功能非常强大,大家可以去官网上查看,废话不说了. 这篇文件主要是实现在ASP环境中利用xhEditor编辑器 ...

  9. 内存管理 初始化(六)vmalloc_init 及 ioremap

    是不是我错了,本想这个函数会如网上所说将进行非连续内存管理的初始化,但是对于2.6.34的ARM架构而言,该函数实际完成的业务非常少. 内存管理的初始化读到此处,我感觉原有的认识存在很大缺陷: (1) ...

  10. BarTender复合条形码中的分隔符模式详解

    在BarTender 10.1中,支持使用BarTender分隔符模式的复合条形码符号体系包括GS1 Composite和GS1 DataBar (RSS).本文小编给大家详细讲解BarTender分 ...