Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to Horizontally scroll a webpage?

I want to develop a webpage that moves towards the left direction whenever the user scrolls down the mousewheel. Generally all websites are vertical scrolling. But this one should scroll horizontally.

Example code:

<body>
<div style="width:10000px; height:400px; top:0; left:0;">
//here goes the content.
</div>
</body>

My objective is to scroll the DIV horizontally on mouse-wheel scroll, using jQuery or any other Javascript tool.

like image 833
Sujit Agarwal Avatar asked Mar 22 '11 03:03

Sujit Agarwal


People also ask

What is the shortcut to scroll horizontally?

You can move the contents of windows that have horizontal scroll bars to the left or right using the keyboard and the mouse. Move contents to the right: Press the Shift key and scroll the mouse wheel up. Move contents to the left: Press the Shift key and scroll the mouse wheel down.

How do I get a horizontal scroll bar in HTML?

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.

How do you horizontally scroll text in HTML?

The HTML <marquee> tag defines a scrolling text area in the HTML document that moves across the page in a horizontal or vertical direction. By default, text found within the <marquee> tag will scroll from right to left.


1 Answers

Horizontal page scrolling using Javascript

like image 88
Daniel Little Avatar answered Oct 02 '22 13:10

Daniel Little