2011-11-07 11 views
1

私はYUI3で作業し始めています。私はコンポーネントscrollViewをインクルードしていますが、それをオンにする方法を見つけられなかったオプションで、マウスホイールイベントは機能しませんでした。助けていただければ幸いです。YUI3スクロールビューとマウスホイール

var scrollView = new Y.ScrollView({ 
    id: "scrollview", 
    srcNode: '.scrollview-item', 
    height: 375, 
    flick: { 
     minDistance: 10, 
     minVelocity: 0.3, 
     axis: "y" 
    } 
}); 
scrollView.render(); 

答えて

1

私も、いくつかの試行錯誤の後、私は(それは単なる緩和せずに、スクロールしていることを、ノート)作業することを得ることができ、このつまずきました。

var DOM_MOUSE_SCROLL = 'DOMMouseScroll', 
    fixArgs = function(args) { 
     var a = Y.Array(args, 0, true), target; 
     if (Y.UA.gecko) { 
      a[0] = DOM_MOUSE_SCROLL; 
      // target = Y.config.win; 
     } else { 
      // target = Y.config.doc; 
     } 

     if (a.length < 3) { 
      // a[2] = target; 
     } else { 
      // a.splice(2, 0, target); 
     } 

     return a; 
    }; 

Y.Env.evt.plugins.mousewheel = { 
    on: function() { 
     return Y.Event._attach(fixArgs(arguments)); 
    }, 

    detach: function() { 
     return Y.Event.detach.apply(Y.Event, fixArgs(arguments)); 
    } 
}; 

これはYUIマウスホイールイベントですが、少し変更されました。最大の問題は、もともと、ウィンドウやドキュメントの要素だった。意味がない(例えば、返されたターゲットである#myelementをマウスオーバーしたときなど)。それは私がそれに管理する方法ですが、私の次の課題は、通常のスクロールバーのようなスクロールバーの仕事を(あなたがそれをドラッグすると、コンテナがすべき取得することですので、基本的に

// ScrollView 
    var scrollView = new Y.ScrollView({ 
     id: "scrollview", 
     srcNode: '#mycontainer', 
     height: 490, 
     flick: { 
      minDistance:10, 
      minVelocity:0.3, 
      axis: "y" 
     } 
    }); 

    scrollView.render(); 

    var content = scrollView.get("contentBox"); 
    var scroll_modifier = 10; // 10px per Delta 
    var current_scroll_y, scroll_to; 

    content.on("mousewheel", function(e) { 
     // check whether this is the scrollview container 
     if (e.currentTarget.hasClass('container')) { 
      current_scroll_y = scrollView.get('scrollY'); 
      scroll_to = current_scroll_y - (scroll_modifier * e.wheelDelta); 

      // trying to scroll above top of the container - scroll to start 
      if (scroll_to <= scrollView._minScrollY) { 
       // in my case, this made the scrollbars plugin to move, but I'm quite sure it's important for other stuff as well :) 
       scrollView._uiDimensionsChange(); 
       scrollView.scrollTo(0, scrollView._minScrollY); 
      } else if (scroll_to >= scrollView._maxScrollY) { // trying to scroll beneath the end of the container - scroll to end 
       scrollView._uiDimensionsChange(); 
       scrollView.scrollTo(0, scrollView._maxScrollY); 
      } else { // otherwise just scroll to the calculated Y 
       scrollView._uiDimensionsChange(); 
       scrollView.scrollTo(0, scroll_to); 
      }; 
      // if we have scrollbars plugin, flash the scrollbar 
      if (scrollView.scrollbars) { 
       scrollView.scrollbars.flash(); 
      }; 

      // prevent browser default behavior on mouse scroll 
      e.preventDefault(); 
     }; 
    }); 

:ScrollViewとマウスホイールのイベントを処理する関数を初期化しますそれに応じて動く...)

希望は誰でも助けてくれるでしょう:)

+0

スクロールホイールを使用すると、コンテナはFFとOperaでうまく動きますが、Chrome/Safari/IEでは少し遅くなります(デルタはそこに別のものがありますが、気にしませんでしたそれをチェックする^^)。 これを修正するには、 'scroll_modifier'で再生し、' wheelDelta'、ブラウザ、またはあなたが決めるもの –

関連する問題