Disable horizontal scroll; but allow the vertical

Question

Disable horizontal scroll; but allow the vertical

Navigation

#1 by (6 votes)
#2 by (4 votes)

6

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 () {
     window.scrollTo(0,0);
}

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

Question:

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

Original question: link

javascript jquery dom

asked by tomloprod 05.12.2015 в 08:44

source

2 answers

6

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:

body{
   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.

DEMO

answered by 05.12.2015 в 13:17

Templates for different data in C ++ Variable in literal string C #

score 4 · Accepted Answer

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) {
            $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

NOTE:

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