Disable horizontal scroll; but allow the vertical


I'm trying to disable horizontal scroll on a website; but without affecting the vertical.

I have a script that works like a slider by sliding the "body" of the page to the left and revealing more content. However, this creates an extra empty space on the right.

I have to disable horizontal scrolling so that users do not see this empty space. I have tried the following; but it disables both horizontal and vertical scrolling:

window.onscroll = function () {

I've tried the overflow-x:hidden style but that does not work when the width of body is dynamic and not static.


Is there any way to modify my script to disable horizontal scrolling and keep the vertical running?

Original question: link

asked by tomloprod 05.12.2015 в 08:44

2 answers


You were close to getting it; you need to get the document -o window - and link it with the scroll, then you can check if the horizontal scroll is updated to a value greater than 0 and, if so, reassign the value < strong> 0

The following code works fine:

$(function() {

    var $body = $(document);
    $body.bind('scroll', function() {
        // "Desactivar" el scroll horizontal
        if ($body.scrollLeft() !== 0) {


If you want to disable the horizontal scroll of an element ( as a div , for example ) you need to replace $(document) with $("#IDElemento")

JSFiddle: link




The upper code will avoid using horizontal scroll, in addition, you can use the following CSS style: overflow-x:hidden to hide the horizontal scroll.


And it will be as if there is no horizontal scroll

My original answer: link

answered by 05.12.2015 / 08:44

Another possible solution to this problem may be via Css, and it is using overflow-x: hidden;

For example, you put it on your body in this way:

   overflow-x: hidden;

And automatically hide all scroll x (Horizontal) that is in the body.

I leave you a live example, which in my opinion looks cleaner.


answered by 05.12.2015 в 13:17