CODEWITHSUNDEEP
jqueryhtmlcssmobile
homework
homework

Reputation: 9

Disable Horizontal Scrolling on Mobile

So, I have a website here. I have some clouds which move across the page with jQuery. The problem begins when you view the page on mobile. You're able to scroll past the actual page and follow the clouds. This isn't hard to do, and a lot of people have noticed it. There is no problem on PC, although there used to be. I disabled the arrow keys and the space bar as movement though, so you cannot replicate the mobile bug on PC anymore. If anyone could help me, that would be great, thanks.

EDIT: this is the js for the clouds. Maybe it's what's causing this to happen. What I really want, though, is to 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();
});

Upvotes: 0

Views: 767

Answers (1)

justinw
justinw

Reputation: 3976

Having a look at your website, this is how you fix your current issue (which is present on desktop browsers):

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

I will explain why each one of these rules is needed:

  • width: 100%; one hundred percent of the browser window
  • overflow: hidden when elements (like the img) move past the edges (100%) of the browser window, it will be hidden
  • position: relative - do this on the .header or the above rules need to be on the body
  • height: auto you set a static height for an element that has child element expanding past that height, if you don't do this and you use overflow: hidden, the vertical elements within the .header will not be shown

It’s important to note that this is a band-aid fix to a much larger issue; that issue is the current way you are developing the site. There's many other issues going on, here is a short list:

  • don’t wrap your entire site content in a header element
  • use semantic class names, and avoid using names that are reserved for HTML tags(you have an element named .body
  • get used to HTML5 - it's current
  • structure your HTML elements logically

Note: I am not bashing you or your learning experience, this is better than most of my first websites, but I am just trying to get you on the right track to make the rest of development easier

Upvotes: 1

Related Questions