这里的实现也很容易懂,通过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. FFMPEG more samples than frame size (avcodec_encode_audio2) 的解决方案

    在实际的项目中,从音频设备采集到的音频的类型和编码器类型(aac ,amr)通常是不一致的. 那么我们首先需要做重采样的过程.利用swr_convert 重新采样. 这时候我们可能会遇到另外一个问题. ...

  2. codeforces A. Fox and Box Accumulation 解题报告

    题目链接:http://codeforces.com/problemset/problem/388/A 题目意思:有 n 个 boxes,每个box 有相同的 size 和 weight,但是stre ...

  3. vim 使用、设置笔记

    一.设置.vimrc( windows下通常为_vimrc) 1.设置vim中tab的缩进 set ts=4  (注:ts是tabstop的缩写,设TAB宽4个空格) set expandtab (注 ...

  4. 用python做自动化测试--Python实现远程性能监控

    http://blog.csdn.net/powerccna/article/details/8044222 在性能测试中,监控被测试服务器的性能指标是个重要的工作,包括CPU/Memory/IO/N ...

  5. bzoj 2151 种树——贪心+后悔

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2151 似乎是半年+前讲过的.(然而看到的时候却不会了) 考虑贪心,限制就是不能选两边的.如果 ...

  6. Windows下安装zip包解压版mysql

    Windows下安装zip包解压版mysql 虽然官方提供了非常好的安装文件,但是有的时候不想每次再重装系统之后都要安装一遍MySQL,需要使用zip包版本的MySQL.在安装时需如下三步: 1. 新 ...

  7. Jacob开发文件转PDF

    这三种方法我都有试过word转PDF,第2种.第3种对于图片,表格.中文转换效果都不好,方法1效果最好.但方法1 只支持Windows环境下. 1.开发环境 Windows系统: 2.准备工作: st ...

  8. TypeScript完全解读(26课时)_7.ES6精讲 - 类Class基础

    ES6精讲 - 类Class基础 es5中创建构造函数和实例 原来在es5中的写法 定义好Point后,在原型对象上定义getPostion的方法 实例自身是没有这个方法的,我们调用的时候会去创建他的 ...

  9. Job for mysqld.service failed because the control process exited with error code. See "systemctl status mysqld.service" and "journalctl -xe" for details.

    一.前言 Job for mysqld.service failed because the control process exited with error code. See "sys ...

  10. Fitnesse 之 Script Table

    在表中每一行代表一个执行脚本. 第一行中的Script关键字表明表格类型,后面紧跟着类名(Fixture)和构造函数中的参数.在一个测试页中如果没有再指定其它Fixture,将一直沿用上一个Fixtu ...