Underscore.js jQuery plugin for scroll functionality

For a website, I had to implement a parallax page with scrolling. Initially, I used onmousewheel event and set timeout to control scrolling. But this had different behavior in different devices. The initial code was like below


//Scrolling Event
if (document.addEventListener) {
// IE9, Chrome, Safari, Opera
document.addEventListener("mousewheel", ScrollBegin, false);
// Firefox
document.addEventListener("DOMMouseScroll", ScrollBegin, false);
}
// IE 6/7/8
else document.attachEvent("onmousewheel", ScrollBegin);

ScrollBegin function was like below


function ScrollBegin(e) {
if (document.removeEventListener) {
// IE9, Chrome, Safari, Opera
document.removeEventListener("mousewheel", ScrollBegin, false);
// Firefox
document.removeEventListener("DOMMouseScroll", ScrollBegin, false);
}
// IE 6/7/8
else document.detachEvent("onmousewheel", ScrollBegin);
// cross-browser wheel delta
var e = window.event || e; // old IE support
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
//if the delta value is negative, the user is scrolling down
if (delta < 0) {
timer = setTimeout(function () {
MoveScreen('down');
clearTimeout(timer);
if (document.addEventListener) {
// IE9, Chrome, Safari, Opera
document.addEventListener("mousewheel", ScrollBegin, false);
// Firefox
document.addEventListener("DOMMouseScroll", ScrollBegin, false);
}
// IE 6/7/8
else document.attachEvent("onmousewheel", ScrollBegin);
}, 800);
}
else {
timer = setTimeout(function () {
MoveScreen('up');
clearTimeout(timer);
if (document.addEventListener) {
// IE9, Chrome, Safari, Opera
document.addEventListener("mousewheel", ScrollBegin, false);
// Firefox
document.addEventListener("DOMMouseScroll", ScrollBegin, false);
}
// IE 6/7/8
else document.attachEvent("onmousewheel", ScrollBegin);
}, 800);
}
}

On a windows PC with scrollable mouse, the function was working perfect. But on a Mac with Apple MagicMouse it was too fast. So, then I started thinking about controlling mouse speed. One option was to retrieve mousespeed in eventhandler and reduce it. After some research and with help from stackoverflow.com, I came across underscore.js jQuery Plugin. This plugin is cool.

Now, I changed my function to be like below

<script src="http://underscorejs.org/underscore-min.js"></script>

$(document).on("mousewheel", _.debounce(MouseWheelHandler, 150, false));

function MouseWheelHandler(event, delta) {
if(delta<0)
{
direction='down';
}
else
{
direction='up';
}
MoveScreen(direction);
};

The second parameter in _.debounce function is time interval in milliseconds to wait after event has ended. The default value is 1000ms. But this was too slow for me. So, I set it to 150ms.

The most important point to note is that it has the same behavior across browsers and mouse devices. Super cool plugin.

 

Share This

Leave a Reply

Your email address will not be published. Required fields are marked *


4 + = twelve

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>