Skip to content

Instantly share code, notes, and snippets.

@derek
Created December 20, 2011 05:35
Show Gist options
  • Save derek/1500415 to your computer and use it in GitHub Desktop.
Save derek/1500415 to your computer and use it in GitHub Desktop.
YUI ScrollView w/ Mousewheel support
diff --git a/src/scrollview/js/scrollview-base.js b/src/scrollview/js/scrollview-base.js
index 394a75d..e967c97 100644
--- a/src/scrollview/js/scrollview-base.js
+++ b/src/scrollview/js/scrollview-base.js
@@ -15,6 +15,7 @@ var getClassName = Y.ClassNameManager.getClassName,
FLICK = EV_SCROLL_FLICK,
DRAG = "drag",
+ MOUSEWHEEL = "mousewheel",
UI = 'ui',
@@ -120,6 +121,7 @@ Y.ScrollView = Y.extend(ScrollView, Y.Widget, {
sv._bindDrag(sv.get(DRAG));
sv._bindFlick(sv.get(FLICK));
+ sv._bindMousewheel(sv.get(MOUSEWHEEL));
sv._bindAttrs();
// IE SELECT HACK. See if we can do this non-natively and in the gesture for a future release.
@@ -193,6 +195,15 @@ Y.ScrollView = Y.extend(ScrollView, Y.Widget, {
cb.detach('flick|*');
}
},
+
+ _bindMousewheel : function(mousewheel) {
+ var cb = this._cb;
+ if (mousewheel) {
+ cb.on("mousewheel", Y.bind(this._mousewheel, this), mousewheel);
+ } else {
+ cb.detach('mousewheel|*');
+ }
+ },
/**
* syncUI implementation.
@@ -217,7 +228,16 @@ Y.ScrollView = Y.extend(ScrollView, Y.Widget, {
* @param easing {String} An easing equation if duration is set
*/
scrollTo: function(x, y, duration, easing) {
-
+
+ if (easing === undefined) {
+ if ( y < this._minScrollY) {
+ y = this._minScrollY;
+ }
+ else if ( y > this._maxScrollY) {
+ y = this._maxScrollY;
+ }
+ }
+
if (!this._cDisabled) {
var cb = this._cb,
xSet = (x !== null),
@@ -815,6 +835,28 @@ Y.ScrollView = Y.extend(ScrollView, Y.Widget, {
}
},
+ _mousewheel: function(e) {
+ var scrollY = this.get('scrollY'),
+ contentBox = this._cb,
+ lineHeight = contentBox.one("ul li").getComputedStyle('height'),
+ lineHeightInt = parseInt(lineHeight, 10),
+ scrollToY = scrollY - (e.wheelDelta * lineHeightInt);
+
+ this.scrollTo(0, scrollToY);
+
+ // if we have scrollbars plugin, update & set the flash timer on the scrollbar
+ if (this.scrollbars) {
+ this.scrollbars._hostDimensionsChange();
+ // or
+ //this.scrollbars._update();
+ // &
+ //this.scrollbars.flash();
+ }
+
+ // prevent browser default behavior on mouse scroll
+ e.preventDefault();
+ },
+
/**
* Execute a single frame in the flick animation
*
@@ -1077,6 +1119,18 @@ Y.ScrollView = Y.extend(ScrollView, Y.Widget, {
*/
drag: {
value: true
+ },
+
+ /**
+ * Enable/Disable mousewheel support
+ * @attribute mousewheel
+ * @type boolean
+ */
+ mousewheel: {
+ valueFn: function(){
+ var somethingToTestForAMouse = true;
+ return somethingToTestForAMouse;
+ }
}
},
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment