Geek Answers Handbook

Hack vertical scroll to horizontal scroll

I know this contradicts every usability rule in a book, but does anyone have any ideas for getting the vertical scroll to scroll horizontally?

So if:

Did the user browse the page and scroll down, did the page scroll horizontally?

Thanks!

+4
source share
2 answers

With all due respect, this sounds very strange, and my preliminary tests show that this can be done, but the result is almost useless. Try the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Scrolling test</title> <!-- jQuery library - I get it from Google API --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $(window).scroll(function(event){ var topScroll = $(window).scrollTop(); var leftScroll = $(window).scrollLeft(); $(window).scrollLeft(topScroll); $("body").css("padding-top", leftScroll); }); }); </script> <style type="text/css"> h1 { font-family: Verdana, Arial, sans-Serif; font-size: 46px; display: block; white-space:nowrap; } body { height: 1000px; } </style> </head> <body> <div id="content"><h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tincidunt dictum rhoncus. Phasellus nulla nulla, facilisis eu aliquam aliquet, mattis pulvinar purus. </h1></div> </body> </html>

Since the scroll is in the actual browser window itself, it seems that it is not possible to capture the scroll event and prevent it from spreading. I tried this with jQuery (event.stopPropagation) and it did not work. Therefore, I resorted to adding the upper body to the body in order to create the illusion that vertical scrolling did not occur. I don’t see it being used in a living environment, although the result was terrible. :-)

However, it was interesting to learn!

Regards, Thomas Kahn

+4
source

If anyone still wants to know. I wanted to do the same, and it worked for me using a few divs, a fixed position and some JavaScript code.

HTML:

 <div id='first'> <div id='second'> <!-- content --> </div> </div>

CSS

 #first { overflow:hidden; height:9000px; } #second { width:9000px; position:fixed; }

JS:

 window.onscroll=function() { var scroll = window.scrollY; $('#second').css('left', '-' + scroll + 'px'); }

Created a small violin:

http://jsfiddle.net/zfBhK/

+2
source

More articles:


All Articles