Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using the mouse wheel to scroll a browser window horizontally

I have a very wide website, intentionally designed to have no vertical scrolling but a lot of horizontal.

Scrolling horizontally is usually a pain to users so was wondering if there was some way of using the middle mouse or other scrolling habits (eg. page up/down, up/down arrows, middle mouse click/drag) to scroll horizontally instead of vertically.

Edit: The main reason for requiring horizontal scrolling is because the layout/approach is a left to right graphical/interactive timeline. I've since found some examples;

This one with MooTools: http://www.tinkainteractive.com.au/ and a few other examples I found at http://naldzgraphics.net/inspirations/40-examples-of-horizontal-scrolling-websites/

like image 493
Peter Craig Avatar asked Jan 09 '10 01:01

Peter Craig


1 Answers

You can add your own event listener

document.onmousewheel = myScrollFunction

Scrolling can be done by

window.scrollBy(x, y)

Where x is the horizontal scrolling offset and y the vertical scrolling offset.

So you might just call this function in your event listener. You may have to stop bubbling with event.stopPropagation and prevent browser default behaviour with event.preventDefault so that the original scrolling behaviour doesn't get applied anymore.


Edit: I was curious about this so I implemented something :-)

function onScroll(event) {
  // delta is +120 when scrolling up, -120 when scrolling down
  var delta = event.detail ? event.detail * (-120) : event.wheelDelta
  // set own scrolling offset, take inverted sign from delta (scroll down should scroll right,
  // not left and vice versa
  var scrollOffset = 10 * (delta / -120);
  // Scroll it
  window.scrollBy(scrollOffset, 0);
  // Not sure if the following two are necessary, you may have to evaluate this
  event.preventDefault;
  event.stopPropagation;
}

// The not so funny part... fin the right event for every browser
var mousewheelevt=(/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
if (document.attachEvent) 
  document.attachEvent("on"+mousewheelevt, onScroll);  
else if (document.addEventListener)
  document.addEventListener(mousewheelevt, onScroll, false);

This works in Firefox 3.5 and Opera 10, however not in IE8. But that would be your part now... ;-)

like image 95
Leo Avatar answered Oct 06 '22 02:10

Leo