Disable touch panning for body of site on mobile devices

Question

The site I am working on www.salonbkb.com when in a mobile browser will act responsive but will allow the user to use touch to move the site from left to right creating a whitespace on the remaining space after the drag.

Foundation.zurb.com does not do this nor do most sites I have found. I believe msn.com still does this.

How can I prevent this from happening.

I tried

 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>

but that didn't do anything.

Answer 1

A page will not do this ordinarily if you have width=device-width, initial-scale=1 . Some element is stretching the page, allowing the user to pan sideways. This will often happen if you have margins on a 100% width element, or if box-sizing is not set to border-box and there is padding on the 100% width element. You just need to find the element (chrome devtools is useful for this, keep scrolling down and try to find the one with a big border that sticks out) and modify or remove it.

By the way, I would highly recommend against setting user-scalable=no or maximum-scale=1 . It's terrible for usability. Users should be able to zoom in. There are almost no good use cases for this. If you're concerned about tap delay, use fastclick .

Answer 2

You can use javascript to disable the default actions of the browser (like page drag).

document.addEventListener("touchmove",function(event){event.preventDefault();});

BUT, that will stop the user from being able to scroll down also. to prevent only sideways you would have to add conditions that check the touch direction...

 document.addEventListener("touchmove",function(event){
      if(//check if the absolute value
           of last touch.x -current touch.x 
           is greater than some threshhold){

            event.preventDefault();
       }
  });