Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable horizontal scroll with JavaScript

Does anyone know if there is a way to disable the horizontal scrollbar using JavaScript?

I don't want to use overflow-x: hidden;.

like image 245
Jay Avatar asked Sep 21 '11 16:09

Jay


People also ask

How do I turn off horizontal scrolling?

To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML. CSS.

How do I stop horizontal scrolling in web design?

You can also set the overflow-x CSS property to hidden, which prevents child content from wrapping within its container but turns off sideways scrolling. Another solution is to set the width of child elements to 100%.

How do I stop horizontal scroll in VS code?

Use Ctrl + E, then Ctrl + W for disable horizontal scrolling.

How do I stop horizontal scrolling in react?

To hide the horizontal scroll bar, we can use the overflow-x: hidden property.


1 Answers

Without using the perfectly workable overflow-x CSS property, you could resize the content to not require a scroll bar, through javascript or through HTML/CSS design.

You could also do this:

window.onscroll = function () {
 window.scrollTo(0,0);
}

... which will detect any scrolling and automatically return the scroll to the top/left. It bears mentioning that doing something like this is sure to frustrate your users.

You're best served by creating an environment where unwanted UI elements are not present at all (through the CSS, through design). The approach mentioned above shows unnecessary UI elements (scroll bars) and then causes them to not work in a way that the user expects (scroll the page). You've "broken a contract" with the user - how can they trust that the rest of your web site or application will do expected things when the user makes a familiar action?

like image 146
Chris Baker Avatar answered Oct 05 '22 22:10

Chris Baker