首页 > Web开发 > 详细

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

时间:2015-04-28 20:49:13      阅读:517      评论:0      收藏:0      [点我收藏+]

这里的实现也很容易懂,通过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() 源码解读

原文:http://www.cnblogs.com/qianlegeqian/p/4463691.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!