jquery - Disable Horizontal Scrolling on Mobile -

so, have website here. have clouds move across page jquery. problem begins when view page on mobile. you're able scroll past actual page , follow clouds. isn't hard do, , lot of people have noticed it. there no problem on pc, although there used be. disabled arrow keys , space bar movement though, cannot replicate mobile bug on pc anymore. if me, great, thanks.

edit: js clouds. maybe it's what's causing happen. want, though, disable horizontal scrolling on mobile completely, if possible

$(function() {   var img = $("#cloud"),       width = img.get(0).width,       screenwidth = $(window).width(),       duration = 50000;    function animateplane() {       img.css("left", -width).animate({           "left": screenwidth       }, duration, animateplane);   }    animateplane(); }); 

having @ website, how fix current issue (which is present on desktop browsers):

.header {   height: auto;   position: relative;   overflow: hidden;   width: 100%; } 

i explain why each 1 of these rules needed:

• width: 100%; 1 hundred percent of browser window
• overflow: hidden when elements (like img) move past edges (100%) of browser window, hidden
• position: relative - on .header or above rules need on body
• height: auto set static height element has child element expanding past height, if don't , use overflow: hidden, vertical elements within .header not shown

---

it’s important note band-aid fix larger issue; issue current way developing site. there's many other issues going on, here short list:

• don’t wrap entire site content in header element
• use semantic class names, , avoid using names reserved html tags(you have element named .body
• get used html5 - it's current
• structure html elements logically

note: not bashing or learning experience, better of first websites, trying on right track make rest of development easier