Disable horizontal scroll; but allow vertical scroll

Question

I'm trying to disable horizontal scroll on a website; but allowing vertical scrolling.

I have a script which works like a slider by sliding the 'body' of the page left and revealing more contents. However this creates extra empty space on the right.

I need to disable horizontal scrolling so users don't see this empty space. I tried the following script but it disables both horizontal and vertical scrolling:

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

I have tried overflow-x: hidden but that doesn't work when the body's width is dynamic and not static.

Question:

Is there a way to modify the above script to disable the horizontal scrolling and keep vertical scrolling?

Community · Accepted Answer · 2020-06-20 09:12:55Z

24

You were close to get it. You need to get the document —or window— and bind the scroll: then you can check if the scrollLeft is updated to more than 0 and set the scrollLeft to 0.

The next code works well:

$(function() {

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

});

If you want to disable horizontal scroll for an element (like div, for instance) you only need to replace $(document) by $("#yourElementID")

JSFiddle: https://jsfiddle.net/tomloprod/zx1bvdf5/

NOTE:

The above script will prevent you scroll horizontally and, in addition, you can use the next CSS style: overflow-x:hidden; to hide the horizontal scroll.

And will be like if there were no horizontal scrolling.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 3, 2015 at 11:15

tomloprod

7,9776 gold badges53 silver badges71 bronze badges

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

Comments

Amit Joki · Accepted Answer · 2014-03-27 04:51:22Z

16

This should work (CSS):

html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

answered Mar 27, 2014 at 4:51

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

Comments

Mikaël Mayer · Accepted Answer · 2018-06-01 21:17:32Z

5

Without JQuery:

window.onscroll = function () {
  window.scrollLeft = 0;
}

answered Jun 1, 2018 at 21:17

Mikaël Mayer

10.8k7 gold badges67 silver badges106 bronze badges

Comments

Stanley Tso · Accepted Answer · 2017-01-23 19:37:23Z

4

use overflow-x:hidden on your wrapper element

overflow-x:hidden;

answered Jan 23, 2017 at 19:37

Stanley Tso

412 bronze badges

Comments

Khanin Chomphusri · Accepted Answer · 2019-09-19 01:51:51Z

4

Here is what I did to solve my problem.

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

Hope this helps.

answered Sep 19, 2019 at 1:51

Khanin Chomphusri

492 bronze badges

Comments

WebDevNerdStuff · Accepted Answer · 2021-11-15 18:42:34Z

2

You could also jQuery's "on", and check for the deltaX.

$("body").on("wheel", function(e) {
  var deltaX = e.originalEvent.deltaX;

  if (deltaX !== 100 && deltaX !== -100) {
    // ...do something
  }

  return false;
});

edited Nov 15, 2021 at 18:42

answered May 5, 2016 at 15:59

WebDevNerdStuff

4101 gold badge5 silver badges13 bronze badges

Comments

oriadam · Accepted Answer · 2019-03-18 08:39:25Z

0

CSS:

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden auto;
}

The 100vw/vh means 100% of the view-port (=window inner) width/height.

The hidden auto means never show scroll on x and show scroll on y when necessary.

answered Mar 18, 2019 at 8:39

oriadam

8,7803 gold badges56 silver badges49 bronze badges

Collectives™ on Stack Overflow

Disable horizontal scroll; but allow vertical scroll

Question:

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Question:

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related