Disable horizontal scrolling using JavaScript

Question

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

I do not want to use overflow-x: hidden; .

Answer 1

Without using the fully functional CSS overflow-x property, you can resize the content to not require a scrollbar, through javascript or using HTML / CSS design.

You can also do this:

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

... that will detect any scrolling and automatically return the scroll to the top / left. It should be mentioned that doing something like this for sure can interfere with your users.

It’s best to create an environment in which unwanted user interface elements are completely absent (through CSS, through design). The above approach shows unnecessary user interface elements (scroll bars) and then makes them work differently than the user expects (page scrolling). You have "broken the contract" with the user - how can they trust that the rest of your website or application will do the expected events when the user takes a familiar action?

Answer 2

A way to prevent scrolling items in jQuery:

 $(element).scroll(function () { this.scrollTop = 0; this.scrollLeft = 0; }); 

Well, this does not actually prevent scrolling, but "scrolls back" to the upper left corner of the element, similar to the Chris solution that was created for the window instead of individual elements. Remove the scrollTop or scrollLeft lines according to your needs.

Answer 3

A dirty trick will overlap the scrollbars: http://jsfiddle.net/dJqgf/ .

 var overlap = $('<div id=b>'); $("#a").wrap($('<div>')); $("#a").parent().append(overlap); 

from:

 #a { width: 100px; height: 200px; overflow-x: scroll; } #b { position: relative; left: 0; bottom: 20px; width: 100%; height: 20px; background-color: white; }