Disable horizontal scroll with JavaScript

Question

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

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

Really, the easiest way would be to apply the overflow-x style when you want to hide the scrollbar and then remove it when you want it to show. — n8wrl
– n8wrl, Commented Sep 21, 2011 at 16:11
Can you explain the reason you don't want to use overflow-x:hidden? — Sparky
– Sparky, Commented Sep 21, 2011 at 17:05
Possibly because iOS has a tendency to ignore it in many cases. — El Yobo
– El Yobo, Commented Oct 30, 2013 at 0:33

Chris Baker · Accepted Answer · 2011-09-21 16:37:30Z

10

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?

edited Sep 21, 2011 at 16:37

answered Sep 21, 2011 at 16:18

Chris Baker

50.8k13 gold badges99 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sander Over a year ago

+1 for the note on frustrated users, count me in that group :)

Alex Kosenkov Over a year ago

I usually set overflow-x: hidden. But usually that doesn't prevent browsers from scrolling target horizontally with OSX touchpad.

Lekensteyn · Accepted Answer · 2012-12-02 21:37:35Z

2

A way to prevent elements from scrolling down in jQuery:

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

Well, this does not actually prevent the scrolling, but it "scrolls back" to the top-left corner of an element, similar to Chris' solution which was created for the window instead of single elements. Remove the scrollTop or scrollLeft lines to suit your needs.

edited Dec 2, 2012 at 21:37

answered Sep 21, 2011 at 16:24

Lekensteyn

67k25 gold badges169 silver badges205 bronze badges

2 Comments

Lekensteyn Over a year ago

@Reuben Use scrollLeft instead of scrollTop then.

Reuben Over a year ago

I would say remove this.scrollTop = 0; and this is definitely the answer!

pimvdb · Accepted Answer · 2011-09-21 16:28:31Z

0

A dirty trick would be overlapping the scrollbars: http://jsfiddle.net/dJqgf/.

var overlap = $('<div id=b>');

$("#a").wrap($('<div>'));

$("#a").parent().append(overlap);

with:

#a {
    width: 100px;
    height: 200px;
    overflow-x: scroll;
}

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

answered Sep 21, 2011 at 16:28

pimvdb

155k80 gold badges313 silver badges358 bronze badges

Collectives™ on Stack Overflow

Disable horizontal scroll with JavaScript

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related