jQuery scrollLeft()与scrollTop() 源码解读
这里的实现也很容易懂,通过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() 源码解读的更多相关文章
- 第二十五课:jQuery.event.trigger的源码解读
本课主要来讲解jQuery.event.trigger的源码解读. trigger = function(event, data, elem, onlyHandlers){ if(elem & ...
- jQuery prop() 与 removeProp()源码解读
prop() prop: function( elem, name, value ) { var ret, hooks, notxml, nType = elem.nodeType; // don't ...
- jQuery插件pagination.js源码解读
pagination的github地址:https://github.com/gbirke/jquery_pagination 公司用的是1.2的版本,所以我就读1.2的了. jQuery.fn.pa ...
- 第二十四课:jQuery.event.remove,dispatch的源码解读
本课还是来讲解一下jQuery是如何实现它的事件系统的.这一课我们先来讲一下jQuery.event.remove的源码解读. remove方法的目的是,根据用户传参,找到事件队列,从里面把匹配的ha ...
- 第二十三课:jQuery.event.add的原理以及源码解读
本课主要来讲解一下jQuery是如何实现它的事件系统的. 我们先来看一个问题: 如果有一个表格有100个tr元素,每个都要绑定mouseover/mouseout事件,改成事件代理的方式,可以节省99 ...
- jQuery.Callbacks 源码解读二
一.参数标记 /* * once: 确保回调列表仅只fire一次 * unique: 在执行add操作中,确保回调列表中不存在重复的回调 * stopOnFalse: 当执行回调返回值为false,则 ...
- jquery源码解读
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐进增强)优雅的处理能 ...
- jQuery源码解读----part 2
分离构造器 通过new操作符构建一个对象,一般经过四步: A.创建一个新对象 B.将构造函数的作用域赋给新对象(所以this就指向了这个新对象) C.执行构造函数中的代码 D.返回这个新对象 最后一点 ...
- jquery中的 parseJSON() 源码分析
parseJSON: function( data ) { // Attempt to parse using the native JSON parser first if ( window.JSO ...
随机推荐
- Android记录程序崩溃Log写入文件
将导致程序崩溃的堆栈调用Log写入文件,便于收集bug.在调试安卓程序,由于某些原因调试时手机不能连接PC端,无法通过IDE查看程序崩溃的Log,希望log能够写入文件中,对于已经发布的App可以通过 ...
- 关于S50卡密钥A和密钥B
关于S50卡密钥A和密钥B 1. Mifare_Std 卡片的密钥属性取决于控制字.控制字的默认值是“FF078069”,此时 A密钥:不可被读出,有全部权限. B密钥:可被读出,没有任何权限. 2. ...
- the art of seo(chapter three)
SEO Planning: Customizing Your Strategy ***Developing an SEO Plan Prior to Site Development***Determ ...
- HDU-2255(KM算法)
HDU-2255 题目意思转化之后就是,给你一个二分图(也称 二部图) ,要求选择一些边让左边的点都对应左边的某一个点!该问题也叫做二分图最大匹配.所以可以用KM算法来做这道题.KM前提你要理解匈牙利 ...
- CNN中下一层Feature map大小计算
符号表示: $W$:表示当前层Feature map的大小. $K$:表示kernel的大小. $S$:表示Stride的大小. 具体来讲: 整体说来,和下一层Feature map大小最为密切的就是 ...
- 使用openssl的aes各种加密算法
#include <stdio.h> #include <string.h> #include <sys/types.h> #include <sys/sta ...
- MongoDB:搭建三节点 Replica Set 环境
今天学习了搭建 MongDB 复制环境,实验环境是在虚拟机上同一系统,并搭建三节点 Replica Set,根据文档上的描述,mongodb 复制配置简单,并且能够自动 failover,这些高级特性 ...
- Thread之二:sleep、wait、yield、join
一.回顾下概念 Java中的多线程是一种抢占式的机制而不是分时机制.线程主要有以下几种状态:新建,就绪,运行,阻塞,死亡.抢占式机制指的是有多个线程处于就绪状态,但是只有一个线程在运行. 1.sl ...
- dcos下rexray服务的配置
在dcos环境下,rexray服务的默认配置文件为/opt/mesosphere/etc/rexray.conf,而其服务文件则是 /etc/systemd/system/dcos-rexray.se ...
- ajax展示新页面同时传递参数
HTML页面部分代码: <div id="course" hidden></div> HTML页面中ajax代码: var selectType=$(&qu ...