How To Stop Horizontal Scrolling?

April 21, 2024 Post a Comment

I have written a file using html and javascript. In that Vertical scrolling should be there, but i want to stop horizontal scrolling. How can I do that?

Solution 1:

Sarfraz has already mentionedoverflow-x, which is one answer although it means (as it says!) that anything that would have been off to the right is now unavailable to the user. There are use cases for that, but in the main it's undesireable to bother to have content the user can't access.

The question is: Why are you getting horizontal scrolling at all? In the normal course of things, the browser will wrap content such that there isn't any horizontal scrolling required. Provided the user has a normal-ish window size, you cause horizontal scrolling in your design by having elements that you've specified as being a certain width, either via style information or by having non-wrappable content (like a big image). For instance, this won't require horizontal scrolling:

<p>...lots of text here...</p>

...but this will:

<pstyle='width: 1200px'>...lots of text here...</p>

...if the user's browser window is less than 1200 pixels wide.

So if having the content off to the right unavailable isn't what you intend, my answer would be to find the elements causing the scrolling and correct them.

Solution 2:

Apply following style to that element:

overflow-x:hidden;

or it should be:

overflow:auto;
overflow-x:hidden;

this will make sure that vertical scrolling is there when needed.

Solution 3:

if you want to use this in every browser, you shouldn't add no width to the element, and then it gets no horizontal overflow, in every browser.

Solution 4:

If I understand your question correctly, you want to prevent your content from going beyond the boundaries of the browser window. Very often, designers set their layout widths to 960px in order to set a fixed width centered on the page, which fits nicely within a 1024px x 768px computer screen. As per below comments, a smaller resolution computer would gain scrollbars because of this. You would do that with something like:

<html><head></head><body><divstyle="width:960px; margin:0 auto;">
     ... The rest of your content goes here ...
  </div></body></html>

You can read more about browser width here:

http://www.fivefingercoding.com/web-design/is-there-a-perfect-web-design-width

If you find that the content stretches beyond this width, then a specific item inside the page is too wide. Look at the page yourself to identify what it might be, or provide a link to stack overflow for our help. To give you an example, having this inbetween the above div would be problematic:

<table style="width:99999px;"> ... table stuff ... </table>

Solution 5:

if you want your html.body or div liquid;

div.sample{ width:100%;}

sample div will resize whether your screen big or small/ without scroller/

Html5 News