这里的实现也很容易懂,通过jQuery的静态方法each给jQuery的原型添加scrollLeft和scrollTop方法。

这里在取值时它把window和普通的element做了区分

如果是window,就使用window.pageXOffset window.pageYOffset获取

如果是element,就通过element.scrollLeft element.scrollTop获取。

关于pageXOffset,MDN中介绍:

  1. var x = (window.pageXOffset !== undefined)
  2. ? window.pageXOffset
  3. : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
  4.  
  5. var y = (window.pageYOffset !== undefined)
  6. ? window.pageYOffset
  7. : (document.documentElement || document.body.parentNode || document.body).scrollTop;
  1. jQuery.each( { scrollLeft: "pageXOffset", scrollTop: "pageYOffset" }, function( method, prop ) {
  2. var top = "pageYOffset" === prop;
  3.  
  4. jQuery.fn[ method ] = function( val ) {
  5. //调用access全局方法
  6. //access内部会调用method(elem[0],val)
  7. return access( this, function( elem, method, val ) {
  8. var win = getWindow( elem );//是不是window
  9. if ( val === undefined ) {//如果val为undefined
  10. //如果win存在,返回window[prop] prop是对象的键值
  11. //如果不存在,返回elem[method] method是对象的键名
  12. return win ? win[ prop ] : elem[ method ];//window.pageXOffset 或者 elem.scrollLeft
  13. }
  14. //下面是设置值
  15. if ( win ) {//$(window) $(document)
  16. win.scrollTo(
  17. !top ? val : window.pageXOffset,
  18. top ? val : window.pageYOffset
  19. );
  20.  
  21. } else {
  22. elem[ method ] = val;
  23. }
  24. }, method, val, arguments.length, null );
  25. };
  26. });

jQuery scrollLeft()与scrollTop() 源码解读的更多相关文章

  1. 第二十五课:jQuery.event.trigger的源码解读

    本课主要来讲解jQuery.event.trigger的源码解读. trigger = function(event, data, elem, onlyHandlers){ if(elem & ...

  2. jQuery prop() 与 removeProp()源码解读

    prop() prop: function( elem, name, value ) { var ret, hooks, notxml, nType = elem.nodeType; // don't ...

  3. jQuery插件pagination.js源码解读

    pagination的github地址:https://github.com/gbirke/jquery_pagination 公司用的是1.2的版本,所以我就读1.2的了. jQuery.fn.pa ...

  4. 第二十四课:jQuery.event.remove,dispatch的源码解读

    本课还是来讲解一下jQuery是如何实现它的事件系统的.这一课我们先来讲一下jQuery.event.remove的源码解读. remove方法的目的是,根据用户传参,找到事件队列,从里面把匹配的ha ...

  5. 第二十三课:jQuery.event.add的原理以及源码解读

    本课主要来讲解一下jQuery是如何实现它的事件系统的. 我们先来看一个问题: 如果有一个表格有100个tr元素,每个都要绑定mouseover/mouseout事件,改成事件代理的方式,可以节省99 ...

  6. jQuery.Callbacks 源码解读二

    一.参数标记 /* * once: 确保回调列表仅只fire一次 * unique: 在执行add操作中,确保回调列表中不存在重复的回调 * stopOnFalse: 当执行回调返回值为false,则 ...

  7. jquery源码解读

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐进增强)优雅的处理能 ...

  8. jQuery源码解读----part 2

    分离构造器 通过new操作符构建一个对象,一般经过四步: A.创建一个新对象 B.将构造函数的作用域赋给新对象(所以this就指向了这个新对象) C.执行构造函数中的代码 D.返回这个新对象 最后一点 ...

  9. jquery中的 parseJSON() 源码分析

    parseJSON: function( data ) { // Attempt to parse using the native JSON parser first if ( window.JSO ...

随机推荐

  1. Android记录程序崩溃Log写入文件

    将导致程序崩溃的堆栈调用Log写入文件,便于收集bug.在调试安卓程序,由于某些原因调试时手机不能连接PC端,无法通过IDE查看程序崩溃的Log,希望log能够写入文件中,对于已经发布的App可以通过 ...

  2. 关于S50卡密钥A和密钥B

    关于S50卡密钥A和密钥B 1. Mifare_Std 卡片的密钥属性取决于控制字.控制字的默认值是“FF078069”,此时 A密钥:不可被读出,有全部权限. B密钥:可被读出,没有任何权限. 2. ...

  3. the art of seo(chapter three)

    SEO Planning: Customizing Your Strategy ***Developing an SEO Plan Prior to Site Development***Determ ...

  4. HDU-2255(KM算法)

    HDU-2255 题目意思转化之后就是,给你一个二分图(也称 二部图) ,要求选择一些边让左边的点都对应左边的某一个点!该问题也叫做二分图最大匹配.所以可以用KM算法来做这道题.KM前提你要理解匈牙利 ...

  5. CNN中下一层Feature map大小计算

    符号表示: $W$:表示当前层Feature map的大小. $K$:表示kernel的大小. $S$:表示Stride的大小. 具体来讲: 整体说来,和下一层Feature map大小最为密切的就是 ...

  6. 使用openssl的aes各种加密算法

    #include <stdio.h> #include <string.h> #include <sys/types.h> #include <sys/sta ...

  7. MongoDB:搭建三节点 Replica Set 环境

    今天学习了搭建 MongDB 复制环境,实验环境是在虚拟机上同一系统,并搭建三节点 Replica Set,根据文档上的描述,mongodb 复制配置简单,并且能够自动 failover,这些高级特性 ...

  8. Thread之二:sleep、wait、yield、join

    一.回顾下概念 Java中的多线程是一种抢占式的机制而不是分时机制.线程主要有以下几种状态:新建,就绪,运行,阻塞,死亡.抢占式机制指的是有多个线程处于就绪状态,但是只有一个线程在运行.   1.sl ...

  9. dcos下rexray服务的配置

    在dcos环境下,rexray服务的默认配置文件为/opt/mesosphere/etc/rexray.conf,而其服务文件则是 /etc/systemd/system/dcos-rexray.se ...

  10. ajax展示新页面同时传递参数

    HTML页面部分代码: <div id="course" hidden></div> HTML页面中ajax代码: var selectType=$(&qu ...