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. 基于Socket的低层次Java网络编程

    Socket通讯 网络上的两个程序通过一个双向的通讯连接实现数据的交换,这个双向链路的一端称为一个Socket.Socket通常用来实现客户方和服务方的连接.Socket是TCP/IP协议的一个十分流 ...

  2. 模拟页面获取的php数据(三)

    <?php return array( "aData" => [//通勤方式 "trafficType" => [ 0 => [ &qu ...

  3. 服务端、实时、大数据、AI计算

    服务端.实时.大数据.AI计算,各种各样的计算,计算机本质是什么,计算机的本质是 利用compute的计算速度为人提供更优的计算结果. 所以实时也好,准实时.离线.AI本质上是两个维度,实时准实时强调 ...

  4. PyPDF2详解

    工作中可能会涉及处理pdf文件,PyPDF2就是这样一个库, 使用它可以轻松的处理pdf文件,它提供了读.写.分割.合并.文件转换等多种操作.官方地址:http://mstamy2.github.io ...

  5. 潭州课堂25班：Ph201805201 MySQL第三课 (课堂笔记)

    单表查询: select * from select sname from stu; 条件查询 select sname from stu where sid=2; select sname from ...

  6. 关于WEB前端开发的工具

    俗话说:"工谷善其事,先必利其器."一个用得顺手的工具,确实能为我们的开发带来方 便,更重要的是会让我们更加享受工具开发过程中所带来的乐趣. 1.编码工具: 记事本之类的编辑器都可 ...

  7. String、StringBuffer、StringBulider

    三者都实现了CharSequence接口,因此CharSequence可认为是一个字符串的协议接口 1.String类是不可变类,即一旦一个String对象被创建后,包含在这个对象中的字符序列是不可改 ...

  8. Linux.Centos安装scp反复失败的解决方式

    现象 在A服务器用scp命令从B服务器拉文件时, 报找不到scp指令的错误 在A服务器运行 scp --help 发现是有指令的 在B服务器上 常规方式, 安装openssh-clients yum ...

  9. jupyter notebook 在mac OS上的安装

    一.关于Anaconda python中有很多包,类似于java中的jar包,java中用maven.gradle来管理依赖的jar包,而在python中类似的工具就是anaconda(当然还有其它工 ...

  10. Java中有哪些语法糖？

    不要你写汇编,Java句句是糖 不能同意上面的这句话,要说为什么,首先要定义下面要讲的“语法糖”. 语法糖指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,并没有给语言添加什么新东西,但是 ...