To prevent vertical scrolling on mobile devices, I attempted using the CSS code:
body {overflow-x:hidden}This successfully disables vertical scrolling in regular browsers. However, if there is an element wider than the screen on mobile, it still allows side scrolling.
Trying to address this issue, I used the following JavaScript code:
jQuery(document).ready(function($) {
var $body = $(document);
$body.bind('scroll', function() {
// "Disable" the horizontal scroll.
if ($body.scrollLeft() !== 0) {
$body.scrollLeft(0);
}
});
});Although this approach prevents side scrolling on mobile devices, it does cause the scroll to jump back to the right, which is not ideal.
Another attempt involved including the meta tag in the HTML:
<meta name="viewport" content=" width=device-width; initial-scale=1.0; user-scalable=0;" />
$(document).bind("touchmove",function(event){
event.preventDefault();
});While this solution successfully disables mobile scrolling entirely, it affects both horizontal and vertical scrolling. My goal is to disable only horizontal scrolling.