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

浏览数：147 / 时间：2015年06月09日

这里的实现也很容易懂，通过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 );
    };
});