Just now, accidentally, i stumble upon http://www.benekdesign.com/ . Here on mouse wheel scroll it performs horizontal scroll. Truly speaking i didn't like this feature. It was a bit irritating. But still, Please tell me how to achieve the same.
Edited
Okay, firebug says he is using
/* Horizontal Tiny Scrolling - a smooth scrolling script for horizontal websites 2(the brother of the vertical "Tiny Scrolling") 3by Marco Rosella - http://www.centralscrutinizer.it/en/design/js-php/horizontal-tiny-scrolling 4 v0.6 - February 14, 2007
For horizontal scrollable bar use the x and y-axis. Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line.
You can use $('html, body'). scrollLeft() to get the horizontal scrolling position if you use jQuery.
It looks like he's just mapping the mousewheel event to scrolling the area. In IE, this is really easy by just using the doScroll()
method - this will scroll the horizontal bar by the amount the vertical bar would normally scroll by. Other browsers don't support the doScroll()
method, so you have to live with scrolling by an arbitrary amount instead:
var mouseWheelEvt = function (event) {
if (document.body.doScroll)
document.body.doScroll(event.wheelDelta>0?"left":"right");
else if ((event.wheelDelta || event.detail) > 0)
document.body.scrollLeft -= 10;
else
document.body.scrollLeft += 10;
return false;
}
document.body.addEventListener("mousewheel", mouseWheelEvt);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With