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. 提取IPv6地址的编码信息

    提取IPv6地址的编码信息   为了保持兼容和地址转化,很多IPv6地址将额外的信息编码到地址信息中,如IPv4地址和Mac地址.在Nmap中,可以使用address-info脚本提取内嵌的信息,并进 ...

  2. 运行程序，解读this指向---case3

    片段1 var myObj = { fullname: "Hou Yi", getFullName: function(){ var self = this; console.lo ...

  3. python处理转义字符

    python2 #1. import HTMLParser HTMLParser.HTMLParser().unescape('Suzy & John') #2. from xml.sax.s ...

  4. 洛谷.3803.[模板]多项式乘法(FFT)

    题目链接:洛谷.LOJ. FFT相关:快速傅里叶变换(FFT)详解.FFT总结.从多项式乘法到快速傅里叶变换. 5.4 又看了一遍,这个也不错. 2019.3.7 叕看了一遍,推荐这个. #inclu ...

  5. rabbitmq使用（三）

    Publish/Subscribe In the previous tutorial we created a work queue. The assumption behind a work que ...

  6. html&css 易忽略的知识点

    1.input标签的readonly属性 <input type="text" readonly="readonly"/>

  7. 使用C3P0报错：java.lang.NoClassDefFoundError: com/mchange/v2/ser/Indirector

    错误提示: java.lang.NoClassDefFoundError: com/mchange/v2/ser/Indirector at JDBC.ConnectionPool.testC3P0( ...

  8. 10款免费开源PHP框架

    NO.1 Laravel - 巨匠级PHP开发框架 现在最流行的一款PHP框架,功能强大,学习和使用也非常简单方便,即使你是PHP新手,也不用担心入门问题. NO.2 Phalcon - 最快的PHP ...

  9. 查询返回JSON数据结果集

    查询返回JSON数据结果集 设计目标: 1)一次性可以返回N个数据表的JSON数据 2)跨数据库引擎 { "tables": [ { "cols": [ { & ...

  10. 9.4 dubbo异步调用原理

    9.1 客户端发起请求源码.9.2 服务端接收请求消息并发送响应消息源码.9.3 客户端接收响应信息(异步转同步的实现) 分析了dubbo同步调用的源码,现在来看一下dubbo异步调用. 一.使用方式 ...