scrollTop & scrollLeft

阿良

先看看jQuery中的代码，晕一下：

1. /*
   
2. jQuery-1.3.2
   
3. 获取方式，引入jQuery-1.3.2
   
4. 然后alert($(window).scrollTop)
   
5. Ctrl + C  Ctrl + V
   
6. 再格式化
   
7. 另，ScrollLeft的自己去拿
   
8. scrollTop:
   
9. */
   
10. function(val) {
    
11.   if (!this[0]) return null;  // 如果this[0]是空，就给你返回空
    
12.   return val !== undefined ? this.each(function() {  // 如果有val
    
13.     this == window || this == document
    
14.       ? window.scrollTo(  // 就滚
    
15.           !i ? val : jQuery(window).scrollLeft(),
    
16.            i ? val : jQuery(window).scrollTop()
    
17.         ) : this[method] = val;
    
18.   }) : this[0] == window || this[0] == document
    
19.     ? self[ i ? 'pageYOffset' : 'pageXOffset']  // 否则就获取scrollTop
    
20.        || jQuery.boxModel
    
21.        && document.documentElement[method]
    
22.        || document.body[method]
    
23.     : this[0][method];
    
24. }

复制代码

再看看1.5.2的，1.5.2的聪明了，top和left用each枚举出来了

1. jQuery.each( ["Left", "Top"], function( i, name ) {
   
2.   var method = "scroll" + name;
   
3. 
   
4.   jQuery.fn[ method ] = function(val) {
   
5.     var elem = this[0], win;
   
6. 
   
7.     if ( !elem ) {
   
8.       return null;
   
9.     }
   
10. 
    
11.     if ( val !== undefined ) {
    
12.       // Set the scroll offset
    
13.       return this.each(function() {
    
14.         win = getWindow( this );
    
15. 
    
16.         if ( win ) {
    
17.           win.scrollTo(
    
18.             !i ? val : jQuery(win).scrollLeft(),
    
19.             i ? val : jQuery(win).scrollTop()
    
20.           );
    
21. 
    
22.         } else {
    
23.           this[ method ] = val;
    
24.         }
    
25.       });
    
26.     } else {
    
27.       win = getWindow( elem );
    
28. 
    
29.       // Return the scroll offset
    
30.       return win ? ("pageXOffset" in win) ? win[ i ? "pageYOffset" : "pageXOffset" ] :
    
31.         jQuery.support.boxModel && win.document.documentElement[ method ] ||
    
32.           win.document.body[ method ] :
    
33.         elem[ method ];
    
34.     }
    
35.   };
    
36. });

复制代码

不解释

jQuery的代码很坑爹啊，有木有！有木有！！
其实，各种浏览器的不同在于此：

1. var sTop = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset;
   
2. var sLeft = document.body.scrollLeft || document.documentElement.scrollLeft || window.pageXOffset;
   
3. //存储的位置不一样，当然其它element也是有这个属性的

复制代码

完毕

king

你分析jquery源码呢。。。。。行啊 小娘子

阿良

king 发表于 2011-7-14 12:46
你分析jquery源码呢。。。。。行啊 小娘子

看看而已，算不上研究

sf小号

好牛啊