这里的实现也很容易懂,通过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. ansible 基础知识

    英文官网,值得拥有! http://docs.ansible.com/ansible/list_of_files_modules.html# 摘自: http://blog.csdn.net/b624 ...

  2. 旋转屏幕导致Activity重建

    简单来说,Activity是负责与用户交互的最主要机制,任何“设置”(Configuration)的改变都可能对Activity的界面造成影响,这时系统会销毁并重建Activity以便反映新的Conf ...

  3. Android-低功耗蓝牙(BLE)-客户端(主机/中心设备)和服务端(从机/外围设备)

    一.Android 低功耗蓝牙(BLE)的API简介 从Android 4.3(API 18)才支持低功耗蓝牙(Bluetooth Low Energy, BLE)的核心功能, BLE蓝牙协议是GAT ...

  4. CI核心文件分析之基准测试类 (Benchmark.php)

    <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); /** * CodeIgniter * * ...

  5. Python: PS 滤镜--水波特效

    本文用 Python 实现 PS 滤镜中的 水波特效 import numpy as np from skimage import img_as_float import matplotlib.pyp ...

  6. Java原子属性更新器AtomicReferenceFieldUpdater的使用

    AtomicReferenceFieldUpdater是基于反射的工具类,用来将指定类型的指定的volatile引用字段进行原子更新,对应的原子引用字段不能是private的.通常一个类volatil ...

  7. 《The challenge of realistic music generation: modelling raw audio at scale》论文阅读笔记

    The challenge of realistic music generation: modelling raw audio at scale 作者:Deep  mind三位大神 出处:NIPS ...

  8. 使用libvirt技术监控虚拟机资源利用情况

    使用libvirt技术监控虚拟机资源利用情况 (一)计算资源与内存资源的监控 libvirt中提供virDomainGetInfo方法可以将一个domain的计算资源和内存资源的使用情况封装在一个结构 ...

  9. PHP文件操作的经典案例

    <?php /* 遍历目录函数,只读取目录的最外层的内容 */ function readDirectory($path){ $handle = opendir($path); while(($ ...

  10. 共相式GIS

    今天看到SuperMap中一直提到共相式GIS,于是乎搜索一下……SuperMap的共相式怎么理解呢?iServer Java有咋理解呢??? 再谈共相式GIS和ArcObjects:ttp://ww ...