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. BZOJ.1758.[WC2010]重建计划(分数规划 点分治 单调队列/长链剖分 线段树)

    题目链接 BZOJ 洛谷 点分治 单调队列: 二分答案,然后判断是否存在一条长度在\([L,R]\)的路径满足权值和非负.可以点分治. 对于(距当前根节点)深度为\(d\)的一条路径,可以用其它子树深 ...

  2. BZOJ.3545.[ONTAK2010]Peaks(线段树合并)

    题目链接 \(Description\) 有n个座山,其高度为hi.有m条带权双向边连接某些山.多次询问,每次询问从v出发 只经过边权<=x的边 所能到达的山中,第K高的是多少. \(Solut ...

  3. BZOJ4313 : 三维积木

    不妨设$R$是唯一可以看到的颜色,考虑一维序列的情况. 设$f[i][j][k][x][y]$表示考虑了前$i$个位置,第$i$个位置的高度是$j$,最高高度是$k$,已经用了$x$个$R$,$y$个 ...

  4. Unity枚举和字符串的相互转换

    直接上代码,见下图: public enum enumEx { A, B, C, D, } public class enumTest : MonoBehaviour { void Start () ...

  5. 关于Random.Range 范围界定

    1. 当Range的参数是float时 Random.Range 范围 static function Range (min : float, max : float) : float :返回一个随机 ...

  6. tcp timestamps

    最近讨论到net.ipv4.tcp_timestamps这个系统配置是否能够开启,RFC文档上说道该值必须为单调递增,否则接受到的包可能会被丢掉 于是查看下tcp协议栈中是根据什么来生成这个times ...

  7. JVM调优总结（7）：调优方法

    JVM调优工具 Jconsole,jProfile,VisualVM Jconsole : jdk自带,功能简单,但是可以在系统有一定负荷的情况下使用.对垃圾回收算法有很详细的跟踪.详细说明参考这里 ...

  8. Delphi发布ActiveX控件 制作CAB包 数字签名相关

    文件: SignTool.rar 大小: 84KB 下载: 下载 最近我正在研究ActiveX技术.我使用Delphi 7创建了一个具有ActiveForm的ActiveX控件应用程序.这个控件产生一 ...

  9. 游戏保护大放送之GPK

    GPK也没有啥特别.龙之谷多开检测和别的不一样. #include "struct.h" #include "FGPK.h" ///////////////// ...

  10. [Android Pro] 完美解决 No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android

    原文:https://blog.csdn.net/qq_24118527/article/details/82867864