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. go语言学习-安装和配置

    go的安装方式主要有两种,一种直接使用系统自带的软件源来安装,比如 ubuntu 可以直接使用 apt 安装,但通常这种方式安装的都不会是最新的.所以通常直接下载最新的安装包,可以到GoCN下载.下面 ...

  2. ARM总线架构

    S3C2440集成了丰富了外设控制器(LCD控制器.USB Device控制器.USB Host控制器.NAND FLASH控制器.I2C控制器.SPI控制器等).要控制这些外设就要设置相应控制器的寄 ...

  3. C语言---斐波那契问题

      最近学习了一个叫递归的概念,里面最著名的一个例子就是斐波那契问题,觉得很有意思,就来实现一下: 什么是斐波那契数列   斐波那契数列,又称黄金分割数列,值得这样一个数列:0.1.1.3.5.8.1 ...

  4. BZOJ.1935.[SHOI2007]Tree园丁的烦恼(CDQ分治 三维偏序)

    题目链接 矩形查询可以拆成四个点的前缀和查询(树套树显然 但是空间不够) 每个操作表示为(t,x,y),t默认有序,对x分治,y用树状数组维护 初始赋值需要靠修改操作实现. //119964kb 43 ...

  5. ECS之旅——常用的linux指令

    玩过Linux的人都会知道,Linux中的命令的确是非常多,但是玩过Linux的人也从来不会因为Linux的命令如此之多而烦恼,因为我们只需要掌握我们最常用的命令就可以了.当然你也可以在使用时去找一下 ...

  6. javascript中的LHS与RHS

    最近在学习javascript过程中,接触了LHS与RHS的概念,刚开始的时候有点理解不清,现在做一些梳理,方便以后进行理解. LHS与RHS:javascript引擎的两种查找类型,含义是赋值操作的 ...

  7. ios 类别(category)

    定义 类别(category)是Objective-C语言的新特性,为现有的类添加新方法的方式.局限性:1.无法添加新的实例变量.2.与类本身的方法名称冲突.当名称冲突时,类别具有更高的优先级.作用: ...

  8. 写自己的ASP.NET MVC框架（下）

    上篇博客[写自己的ASP.NET MVC框架(上)] 我给大家介绍我的MVC框架对于Ajax的支持与实现原理.今天的博客将介绍我的MVC框架对UI部分的支持. 注意:由于这篇博客是基于前篇博客的,因此 ...

  9. MUI右滑关闭窗口用Webview的drag实现

    mui.init({swipeBack:true}); 必须要用很快的速度摩擦屏幕才能达到右滑关闭窗口的效果,且在右边一般都会失效. mui这个滑动,是纯前端的,这个效率在Android上确实一般. ...

  10. Mysql高效插入/更新数据

    从tushare抓取到的财务数据,最开始只是想存下来,用的办法想简单点,是:插入--报错-update 但发现这个方法太蠢,异常会导致大量无效连接,改为: for idx,row in d2.iter ...