disable horizontal scroll for mobile

Question

i wish to disable the vertical scroll for mobile devices. using :

body {overflow-x:hidden}

works for normal browsers but on mobile if there's an element wider than the screen it will allow side scrolling.

i have tried using this code:

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

but it allows the side scrolling (on mobile) but "jumps" the scroll back to the right, this is not a perfect solution.

i have tried using this:

    <meta name="viewport" content=" width=device-width; initial-scale=1.0; user-scalable=0;" /> 
 $(document).bind("touchmove",function(event){
            event.preventDefault();
      });

this works perfect and disable the mobile scrolling totally, the problem is that it is disabling both horizontal and vertical scrolling (i wish to disable only the horizontal).

http://stackoverflow.com/questions/10592411/disable-scrolling-in-all-mobile-devices — Kurenai Kunai, Apr 30 '15 at 10:48
Javascript solution for touch devices-- https://jsfiddle.net/6492jvb0/ — Tasos, Apr 30 '15 at 11:38

score 3 · Accepted Answer · answered Apr 30 '15 at 10:36

3

Try this:

html, body {
  overflow-x: hidden;
}
body {
  position: relative
}

answered Apr 30 '15 at 10:36

Kurenai Kunai

1,842
2
12
22

1

in some cases this worked for me better: html, body { max-width: 100% !important; overflow-x: hidden !important; } – user3003106 Jun 17 '15 at 17:18
That's right. Surprisingly setting overflow to body only not working. Only html + body – Sergey Khmelevskoy Jan 17 '17 at 20:50

disable horizontal scroll for mobile

1 Answers1