JavaScript Scroll家族以及封装

  • scrollTop & scrollLeft 别卷去的值,就是当滑动滚轮浏览网页的时候,网页隐藏在屏幕上方或左侧的距离

  • 获得scrollTop 或者 scrollLeft的值有三种方式

    • 支持谷歌浏览器和没有声明<!DOCTYPE html>:document.body.scrollTop
    • 支持火狐和其它浏览器: document.documentElement.scrollTop
    • 支持ie9+ 和 最新浏览器 : window.pageXOffset

  • 兼容写法

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
  • 封装自己的scroll
function scroll() {

     // 获取scrollTop  和  scrollLeft有三种方式

     // 1.ie9+ 以及其他新的浏览器支持的 --> window.pageXOffset  window.pageYOffset

     // 2.谷歌浏览器和没有声明<!DOCTYPE html>的 --> document.body.scrollLeft  document.body.scrollTop

     // 3.火狐和其他浏览器支持的 --> document.documentElement.offsetLeft  document.documentElement.offsetTop

     if(window.pageXOffset != null) { // ie9+ 以及其他新浏览器

         return {left : window.pageXOffset, top : window.pageYOffset};

     } else if(document.compatMode == "CSS1Compat") { // 声明了<!DOCTYPE html>

         return {left : document.documentElement.offsetLeft, top : document.documentElement.offsetTop};

     } else { // 剩下的怪异浏览器

         return {left : document.body.offsetLeft, top : document.body.offsetTop};

     }

}

JavaScript Scroll家族以及封装的更多相关文章

  1. JavaScript offset、client、scroll家族

    offsetParent <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  2. scroll家族属性

    上一篇主要分析了一下offset家族属性,本篇文章则主要是来分析一下scroll家族属性. 首先,scroll家族包括4个属性: 网页正文宽度:document.body.scrollWidth; 网 ...

  3. js中对象的一些特性，JSON，scroll家族

    一.js中对象的一些特性 对象的动态特性 1.当对象有这个属性时,会对属性的值重写 2.当对象没有这个属性时,会为对象创建一个新属性,并赋值 获得对象的属性的方式 为元素设置DOM0级事件 二.JSO ...

  4. javascript继承(八)－封装

    这个系列主要探讨的是javascript面向对象的编程,前面已经着重介绍了一下js的继承,下面想简单的说一下js如何实现封装的特性. 我们知道面向对象的语言实现封装是把成员变量和方法用一个类包围起来, ...

  5. （一）Javascript 面向对象编程：封装

    Javascript 面向对象编程:封装 作者:阮一峰 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP ...

  6. javascript设计模式系列二-封装

    JavaScript封装: var Book = function (id, name, price) { this.id = id, this.name = name, this.price = p ...

  7. 第52天：offset家族、scroll家族和client家族的区别

    一.offset家族 1.offsetWidth offsetHeight offsetLeft offsetTop offsetParent共同组成了offset家族,用来获取元素尺寸. offse ...

  8. javaScript动画2 scroll家族

    offsetWidth和offsetHight (检测盒子自身宽高+padding+border) 这两个属性,他们绑定在了所有的节点元素上.获取之后,只要调用这两个属性,我们就能够获取元素节点的宽和 ...

  9. Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇

    Javascript面向对象特性实现(封装.继承.接口) Javascript作为弱类型语言,和Java.php等服务端脚本语言相比,拥有极强的灵活性.对于小型的web需求,在编写javascript ...

随机推荐

  1. 获取AFP共享的文件夹及其权限

    获取AFP共享的文件夹及其权限   获取AFP服务的认证信息后,渗透测试人员就可以使用afp-showmount脚本获取共享的文件夹信息,以及各级用户权限信息.其中,用户包括所有者.组.Everyon ...

  2. jQuery.when().done()

    在使用jQuery.when()调用外部声明方法时,如果方法不为Deferred(延时)对象,则done会立即执行,所有需要在调用的方法声明一个var deferred = $.Deferred(); ...

  3. [BZOJ2879][NOI2012]美食节(费用流)

    设sm为所有p之和,套路地对每道菜建一个点,将每个厨师拆成sm个点,做的倒数第i道菜的代价为time*i. S向每道菜连边<0,p[i]>(前者为代价后者为流量),i菜到j厨师的第k个点连 ...

  4. docker测试时候命令无法补全的解决方法_docker

    发现问题 在输入docker swarm 然后tab键不能像这样进行提示 和补全 tab 键也无法补全nginx容器名,下面是运行截图 解决方法: yum install -y bash-comple ...

  5. STL之heap与优先级队列Priority Queue详解

    一.heap heap并不属于STL容器组件,它分为 max heap 和min heap,在缺省情况下,max-heap是优先队列(priority queue)的底层实现机制.而这个实现机制中的m ...

  6. AngualrJS中每次$http请求时的一个遮罩层Directive

    在AngualrJS中使用$http每次向远程API发送请求,等待响应,这中间有些许的等待过程.如何优雅地处理这个等待过程呢? 如果我们在等待过程中弹出一个遮罩层,会是一个比较优雅的做法. 这就涉及到 ...

  7. ckeditor 上传图片解决跨域问题

    前后端分离ckeditor跨域问题处理 这个跨域问题很常见,特别是前后端分离的情况,IP地址不同导致了页面跨域,具体原因大多是因为前端ifame问题 分析 ckeditor插件里config.js需要 ...

  8. Hadoop3集群搭建之——hbase安装及简单操作

    折腾了这么久,hbase终于装好了 ------------------------- 上篇: Hadoop3集群搭建之——虚拟机安装 Hadoop3集群搭建之——安装hadoop,配置环境 Hado ...

  9. 基于Python使用Redis的一些想法和建议

    目录 1关于Redis使用的一点想法 1.1进行缓存前,需考虑 1.2进行缓存后,需考虑 1.3缓存使用一段时间后 2编写Redis数据库层规范建议 2.1选择适合的redis客户端 2.2规范化定义 ...

  10. 创建py模板

    创建模板之后,每次新建py文件,已初始定义的代码段将会自动出现在py文件中.