Prevent horizontal scrolling with javascript?

Question

Does anyone know if there is a way to prevent the user from being able to scroll horizontally? ive used overflow-x:hidden css, but it can still sometimes scroll (but only sometimes, its weird..)

http://www.kaiserroof.com

Would it be possible to disable keystroke events for right/left arrows as well as left/right mousewheel with javascript? if there is no horizontal scrolling, they wouldnt need those buttons anyway. I thought there was a way to do this with javascript, but i cant remember? like onkeypress "left arrow" return false? i dont know too much javascript though..

It looks like you've got some improperly-nested tags or something. By the way, that piercing noise you have on mouse over of the links is one of the worst things I have ever seen. You should remove it, nobody wants a website that hurts your ears. — davidtbernal
– davidtbernal, Commented Sep 2, 2010 at 1:56
Can you scroll horizontally when the vertical scroll bar appears? — Ricardo Marimon
– Ricardo Marimon, Commented Sep 2, 2010 at 1:57
notjim - yeah i hate that noise too but thats what the client wanted. rmarimon - im not sure i understand your quesion. — user433143
– user433143, Commented Sep 2, 2010 at 2:32
On my Chrome browser, there's no horiz scroll for your site, but as a result I could not see the entire width of your page unless I resized the browser. And for people with regular sized screens (I have a large size, heh), that may not be an option. — Larry K
– Larry K, Commented Sep 2, 2010 at 4:19

Daniel · Accepted Answer · 2015-05-06 13:42:22Z

2

It seems that you put overflow-x: hidden in the HTML body; however this will not work. Use overflow-x: hidden on the element that you wish to disable horizontal scrolling.

edited May 6, 2015 at 13:42

Daniel

3,3125 gold badges33 silver badges42 bronze badges

answered Sep 2, 2010 at 6:34

huangli

4549 silver badges26 bronze badges

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

2 Comments

Cipi Over a year ago

He means owerflow-x: hidden;.

deceze Over a year ago

Or maybe överflow-x: hidden?

user433143 · Accepted Answer · 2010-09-02 19:36:18Z

0

I figured it out with jquery if anyone wants to know:

<script language="JavaScript"><!--
function checkKey(e){
     switch (e.keyCode) {
        case 37:
            return false;
            break;
        case 39:
            return false;
            break;
        default:
            return true;  
            }      
}

if ($.browser.mozilla) {
    $(document).keypress (checkKey);
} else {
    $(document).keydown (checkKey);
}
--></script>

answered Sep 2, 2010 at 19:36

user433143

1091 gold badge2 silver badges7 bronze badges

Comments

Jacksnap13 · Accepted Answer · 2014-01-24 17:40:36Z

0

You can try this workaround

$(window).on("scroll", function(evt) {
var height = $(window).scrollTop();
scrollTo(0,height);
});

See my bin here

answered Jan 24, 2014 at 17:40

Jacksnap13

12710 bronze badges

Collectives™ on Stack Overflow

Prevent horizontal scrolling with javascript?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related