jQuery scrollLeft()与scrollTop() 源码解读

时间:2023-12-21 19:26:44

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

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

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

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

关于pageXOffset,MDN中介绍:

jQuery scrollLeft()与scrollTop() 源码解读

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 );
};
});