How to block viewer from scrolling horizontally on a web page?

I was given a very complicated design with a large background, so I had to come up with a little script to resize the screen on smaller screens to center and remove white spaces and remove horizontal scrollbar.

Now this is the Jscript snippet I wrote for screen resizing:

(function() {
    if(jQuery(window).width() >= 1024 && jQuery(window).width() <= 1275 ) {
      jQuery('html').css({"margin-left":"-180px"});
       jQuery('html').css({"overflow-x":'hidden'});

    }


    else if(jQuery(window).width() == 1280) {
      jQuery('html').css({"margin-left":"-52px"});
         jQuery('html').css({"overflow-x":'hidden'});    
    }

     else if(jQuery(window).width() >= 1300 || jQuery(window).width() <= 1400 ) {
      jQuery('html').css({"margin-left":"-0"});
         jQuery('html').css({"overflow-x":'hidden'});    
    }

    else if(jQuery(window).width() >= 1430 ) {
      jQuery('html').css({"margin-right":"-60px"});
         jQuery('html').css({"overflow-x":'hidden'});    
    }

    else if(jQuery(window).width() < 940 ) {
      jQuery('html').css({"margin-left":"0"});
       jQuery('html').css({"overflow-x":'visible'});
    }

    else {


}
})();

now if a user still uses a touch screen they can scroll to right side of the page.

Is there any chance if I can block that ? like not the user scroll horizontally by any chance ?

Thanks

Solution

Use CSS and this to your CSS file:

html, body {overflow-x: hidden;}

If you want to disable scrolling then this would help you.

I found I could fix it by finding/fixing/removing elements that were wider than the width. For instance, if you have a 100% width on your container, and then an element inside has 100% width with margin or padding, even if the overflow is hidden on the container, the page will drag from side to side.

If you can make sure your elements inside don't horizontally spill outside the container, the page won't drag. If you need padding on a percentage width inside the container (like one element with 100% width, or two with 50% or whatever), 'box-sizing: border-box;' is the way forward.