YUI3 scrollView和mousewheel

Question

我開始只使用YUI3。我包含組件scrollView，但它沒有工作mousewheel事件，在我還沒有找到如何打開它的選項。我將不勝感激任何幫助。

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

Answer 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 mousewheel事件，但它有點改變。最大的問題是，原來，無論是窗口還是文檔元素，這是沒有任何意義的（例如，當您將#myelement作爲鼠標滾輪時，您希望它成爲返回的目標..）

Bellow是用於初始化滾動型和處理鼠標滾輪事件功能：

// 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(); 
     }; 
    }); 

所以基本上這就是我設法這一點，但我的下一個挑戰是讓像普通的滾動條的滾動工作（當你拖動它，容器應移動相應...）

希望這可以幫助任何人:)