[转帖]Mootools源码分析-37 -- Fx.Scroll

原帖地址：http://space.flash8.net/space/?uid-18713-action-viewspace-itemid-408229

原作者：我佛山人

 

代码

// 平滑的滚动效果,演示:http://demos.mootools.net/Fx.Scroll
Fx.Scroll  =   new  Class({

     // 继承自Fx类
    Extends: Fx,
    options: {
         // 滚动时的偏移坐标量
        offset: { ' x ' :  0 ,  ' y ' :  0 },
         // 滚轮时是否自动停止滚动效果
        wheelStops:  true
    },

    initialize:  function (element, options)    {
         // 作用的对象
         this .element  =   this .subject  =  $(element);
         // 调用父类同名方法
        arguments.callee.parent(options);
         // 为滚轮事件提供取消滚动的对象绑定,写在下面wheelStops的判断里应该会更好
         var  cancel  =   this .cancel.bind( this ,  false );

         // 如果提供作用对象有误,换成当前文档的body节点对象
         if  ($type( this .element)  !=   ' element ' )  this .element  =  $( this .element.getDocument().body);
         var  stopper  =   this .element;

         // 如果设置滚轮停止
         if  ( this .options.wheelStops)    {
             // 在滚动开始前添加滚轮事件监听
             this .addEvent( ' onStart ' ,  function ()    {
                stopper.addEvent( ' mousewheel ' , cancel);
            },  true );
             // 在滚动结束后移除滚轮事件监听
             this .addEvent( ' onComplete ' ,  function ()    {
                stopper.removeEvent( ' mousewheel ' , cancel);
            },  true );
        }
    },

     // 设置目标值
    set:  function ()    {
         // 给参数对象降维
         var  now  =  Array.flatten(arguments);
         // 滚动到指定坐标
         this .element.scrollTo(now[ 0 ], now[ 1 ]);
    },

     // 根据初始值，结束值和变量求目标值
    compute:  function (from, to, delta)    {
         var  now  =  [];
         // Ruby风格的两次循环,转为from和to是长度为2的数组
        ( 2 ).times( function (i)    {
            now.push(Fx.compute(from[i], to[i], delta));
        });
         return  now;
    },

     // 开始滚动
    start:  function (x, y)    {
         // 检查约束设置
         if  ( ! this .check(x, y))     return   this ;
         // 获取对象尺寸和滚动尺寸
         var  ōffsetSize  =   this .element.getSize(), scrollSize  =   this .element.getScrollSize();
         // 获取当前滚动位置
         var  scroll  =   this .element.getScroll(), values  =  {x: x, y: y};
         for  ( var  z  in  values)    {
             // 计算当前坐标方向上的可滚动的最大值
             var  max  =  scrollSize[z]  -  offsetSize[z];
             // 如果提供滚动的目标值,保证目标值在有效范围内
             if  ($chk(values[z])) values[z]  =  ($type(valus[z])  ==   ' number ' )  ?  values[z].limit( 0 , max) : max;
             // 否则直接使用当前滚动位置值
             else  values[z]  =  scroll[z];
             // 加上配置的偏移量
            values[z]  +=   this .options.offset[z];
        }
         // 调用父类Fx的同名方法
         return  arguments.callee.parent([scroll.x, scroll.y], [values.x, values.y]);
    },

     // 滚动到顶部,x轴滚动位置不变
    toTop:  function ()    {
         return   this .start( false ,  0 );
    },

     // 滚动到左边,y轴滚动位置不变
    toLeft:  function ()    {
         return   this .start( 0 ,  false );
    },

     // 滚动到右边,y轴滚动位置不变
    toRight:  function ()    {
         return   this .start( ' right ' ,  false );
    },

     // 滚动到底部,x轴滚动位置不变
    toBottom:  function ()    {
         return   this .start( false ,  ' bottom ' );
    },

     // 滚动到指定Element的绝对坐标位置
    toElement:  function (el)    {
         // 获取el的绝对坐标值
         var  position  =  $(el).getPosition( this .element);
         // 开始滚动
         return   this .start(position.x, position.y);
    }
});

 

转载于:https://www.cnblogs.com/maapaa/articles/mootools-s-37.html