Skip to content

Instantly share code, notes, and snippets.

@jonathantneal

jonathantneal/yui.scroll.js Secret

Last active Oct 13, 2015
Embed
What would you like to do?
YUI Scroll Events
YUI.add('scroll', function (Y) {
var DOC_ELEMENT = Y.config.doc.documentElement,
WIN = Y.config.win,
UP = 'up',
RIGHT = 'right',
DOWN = 'down',
LEFT = 'left',
EDGE = 'edge',
SCROLL = 'scroll',
SNAP = 'snap',
START = 'start';
function Scroll() {
var instance = this;
Scroll.superclass.constructor.apply(instance, arguments);
}
Scroll.NAME = SCROLL;
Scroll.NS = SCROLL;
Scroll.ATTRS = {
_timeout: {
validator: Y.Lang.isNumber,
value: 250
}
};
Y.extend(Scroll, Y.Plugin.Base, {
initializer: function (config) {
var instance = this;
instance._reset();
Y.one(instance.get('host')).on(SCROLL, Y.bind(instance._onScroll, instance));
},
_onScroll: function (event) {
var instance = this;
var lastDetail = instance._lastDetail;
var detail = {
scrollDown: WIN.scrollY > lastDetail.scrollY,
scrollLeft: WIN.scrollX < lastDetail.scrollX,
scrollRight: WIN.scrollX > lastDetail.scrollX,
scrollSnapX: WIN.scrollX - instance._maxX,
scrollSnapY: WIN.scrollY - instance._maxY,
scrollUp: WIN.scrollY < lastDetail.scrollY,
scrollX: WIN.scrollX,
scrollY: WIN.scrollY
};
if (detail.scrollUp && !lastDetail.scrollUp) {
instance.fire(UP + START, detail);
}
if (detail.scrollUp) {
instance.fire(UP, detail);
}
if (detail.scrollUp && detail.scrollY == 0) {
instance.fire(UP + EDGE, detail);
}
if (detail.scrollUp && detail.scrollY < 0 && lastDetail.scrollSnapY >= 0) {
instance.fire(UP + SNAP + START, detail);
}
if (detail.scrollUp && detail.scrollY < 0) {
instance.fire(UP + SNAP, detail);
}
if (detail.scrollRight && !lastDetail.scrollRight) {
instance.fire(RIGHT + START, detail);
}
if (detail.scrollRight && detail.scrollSnapX > 0 && lastDetail.scrollSnapX < 1) {
instance.fire(RIGHT + SNAP + START, detail);
}
if (detail.scrollRight) {
instance.fire(RIGHT, detail);
}
if (detail.scrollRight && detail.scrollSnapX == 0) {
instance.fire(RIGHT + EDGE, detail);
}
if (detail.scrollRight && detail.scrollSnapX > 0) {
instance.fire(RIGHT + SNAP, detail);
}
if (detail.scrollDown && !lastDetail.scrollDown) {
instance.fire(DOWN + START, detail);
}
if (detail.scrollDown && detail.scrollSnapY > 0 && lastDetail.scrollSnapY < 1) {
instance.fire(DOWN + SNAP + START, detail);
}
if (detail.scrollDown) {
instance.fire(DOWN, detail);
}
if (detail.scrollDown && detail.scrollSnapY == 0) {
instance.fire(DOWN + EDGE, detail);
}
if (detail.scrollDown && detail.scrollSnapY > 0) {
instance.fire(DOWN + SNAP, detail);
}
if (detail.scrollLeft && !lastDetail.scrollLeft) {
instance.fire(LEFT + START, detail);
}
if (detail.scrollLeft && detail.scrollSnapX > 0 && lastDetail.scrollSnapX < 1) {
instance.fire(LEFT + SNAP + START, detail);
}
if (detail.scrollLeft) {
instance.fire(LEFT, detail);
}
if (detail.scrollLeft && detail.scrollSnapX == 0) {
instance.fire(LEFT + EDGE, detail);
}
if (detail.scrollLeft && detail.scrollSnapX > 0) {
instance.fire(LEFT + SNAP, detail);
}
if (detail.scrollY < 0 || detail.scrollSnapX > 0 || detail.scrollSnapY > 0 || detail.scrollX < 0) {
instance._reset();
}
instance._lastDetail = detail;
clearTimeout(instance._timeout);
instance._timeout = setTimeout(instance._reset.bind(instance), instance.get('_timeout'));
},
_reset: function () {
var instance = this;
instance._maxX = DOC_ELEMENT.scrollWidth - WIN.innerWidth,
instance._maxY = DOC_ELEMENT.scrollHeight - WIN.innerHeight;
instance._lastDetail.scrollSnapX = 0;
instance._lastDetail.scrollSnapY = 0;
},
_lastDetail: {},
_maxX: null,
_maxY: null,
_timeout: null
});
Y.Plugin.Scroll = Scroll;
}, '0.1.0', {
requires: ['plugin', 'node']
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.