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

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

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

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

关于pageXOffset,MDN中介绍:

var x = (window.pageXOffset !== undefined)
? window.pageXOffset
: (document.documentElement || document.body.parentNode || document.body).scrollLeft; var y = (window.pageYOffset !== undefined)
? window.pageYOffset
: (document.documentElement || document.body.parentNode || document.body).scrollTop;
jQuery.each( { scrollLeft: "pageXOffset", scrollTop: "pageYOffset" }, function( method, prop ) {
var top = "pageYOffset" === prop; jQuery.fn[ method ] = function( val ) {
//调用access全局方法
//access内部会调用method(elem[0],val)
return access( this, function( elem, method, val ) {
var win = getWindow( elem );//是不是window
if ( val === undefined ) {//如果val为undefined
//如果win存在,返回window[prop] prop是对象的键值
//如果不存在,返回elem[method] method是对象的键名
return win ? win[ prop ] : elem[ method ];//window.pageXOffset 或者 elem.scrollLeft
}
//下面是设置值
if ( win ) {//$(window) $(document)
win.scrollTo(
!top ? val : window.pageXOffset,
top ? val : window.pageYOffset
); } else {
elem[ method ] = val;
}
}, method, val, arguments.length, null );
};
});

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. ArcGIS发布动态空间,并验证

    发布 发布方法见视频. 验证 发布动态空间后,页面底部有 点进去后,使用如下语法验证. {"id": 0,"source": {"type" ...

  2. 动态注册BroadcastReceiver

    1. [代码][Java]代码      package com.zjt.innerreceiver;   import android.app.Service; import android.con ...

  3. python学习笔记:第三天(数字)

    Python3 数字(Number) 1. 数字数据类型 用于存储数值.数据类型是不允许改变的,这就意味着如果改变数字数据类型得值,将重新分配内存空间. 实例在变量赋值时 Number 对象将被创建, ...

  4. 值域线段树 bzoj 4627

    这是题目链接4627: [BeiJing2016]回转寿司 题目大意: 给定n个数,求有多少个字段和在 满足 L<=sum<=R; 解题思路 需要解这个题目,需要有线段树加可持续化的思想, ...

  5. chan_ss7 呼出的时候指定使用某个CICs,或者CICs范围 的方法

      Linkset one: 1-31 Incoming 33-58 Outgoing 58-63 Emergency Traffic Linkset two: 1-31 Incoming 33-58 ...

  6. 并不对劲的bzoj1095:p2056:[ZJOI2007]捉迷藏

    题目大意 给一\(n\)(\(n\leq10^5\))个点的一棵树,每个点有可能是黑色或白色,一开始所有点都是黑色,支持以下两种操作: 1.改变一个点的颜色 2.询问最远的黑色点对的距离 题解 据说是 ...

  7. HDU5919 Sequence2

    传送门 这道题是主席树好题啊-- 题目大意:给定一个序列,每次给定一段区间,区间内所有不同的数第一次出现的位置排成一个序列,求这个序列的中位数. 其实求中位数并不是很难,只要我们能把这个序列中不同的数 ...

  8. JNI——JAVA调用C

    1. 编译java:javac JNIDemo.java 2. 编译JNI:gcc -I/usr/lib/jvm/java-1.8.0-openjdk-amd64/include/ -I/usr/li ...

  9. 五、hibernate在myeclipse中生成实体和映射

  10. fullpage中高度错误的解决方法

    今天我再用fullpage写全屏页面的时候,发现在ie中,一整屏的页面总是不能铺满,高度总是少一截儿,各种搜索,找到了个合适的方法,这里记录下,也希望给之后遇到这个问题的人提供一种方式,当然不一定能解 ...