在移动网页上禁用水平滚动

Question

I've got this simple mobile webpage I'm trying to build, with a Facebook like side menu button. I'm trying to disable horizontal scrolling with the CSS overflow-x:hidden, but it's not working. Here's my code, any help will be greatly appreciated:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>



    <script> 
        $(document).ready(function(){                       
          $("button").click(function(){ 

              var win = $("#right-side");
              var position = win.position();
              //alert( "left: " + position.left + ", top: " + position.top ); 

              if(position.left < 100)
              {
                  $("#right-side").animate({left:'250px'});
              }else{
                  $("#right-side").animate({left:'0px'});
              }

          });
        });
    </script> 

    <style>
        body{overflow-x: hidden;font-family: sans-serif;}

        #right-side{
            background:#BFC7D8;;
            left:0;
            top:0;
            height:100%;
            width:100%;
            position:absolute;

        }
        #left-menu
        {
            background:#323949;
            left:0;
            top:0;
            height:100%;
            width:250px;
            position:absolute;
        }

        #navigation { font-size:20px; width:250px; padding-top:100px; }
        #navigation ul { margin:0px; padding:0px; }
        #navigation li { list-style: none; }



        ul.top-level li > a {
          display: block;
          border-bottom: 1px solid rgba(0,0,0, 0.1);
          border-top: 1px solid rgba(255, 255, 255, 0.1);
          padding: 15px;
          text-shadow: 0 1px 0 #000;
          text-decoration: none;
          color: #ccc;
          text-indent: 20px;
        }

        #toolbar
        {
            width:100%;
            height:50px;
            background:#00F;    
        }


    </style>





<div id="left-menu">
    <div id="navigation">
    <ul class="top-level">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">News</a></li>
    </ul>
</div>  
</div>




<div id="right-side">

    <div id="toolbar">
        <button>Menu</button>
    </div>

    <h1>This is a test</h1>
</div>

Answer 1

I have put your code in a fiddle but I couldn't add the 'zoom' meta tag to the head, so it is hard to test on my phone. http://jsfiddle.net/Pevara/Ku5nY/1/show/

Seems to work fine on desktop though, no scrollbars.

I did add the following to your css:

body{
  overflow-x:hidden;
  font-family: sans-serif;   
  /* added: */
  max-width: 100%; 
  height: 100%;
}

Not sure if it will make a difference, but it is worth a try...

Answer 2

David.

Have you tried using this: http://mmenu.frebsite.nl/

Alternatively, Take a look at this and see if you can use it to adjust to your code:

http://jsfiddle.net/tzDjA/

You will notice there are 3 functions:

$('#trigger').click( function() {
    if ($('#popout').hasClass('hidden')) {
        $('#popout').removeClass('hidden');
        showPopout();
    }
    else {
        $('#popout').addClass('hidden');
        hidePopout();
    }
});

function showPopout() {
    $('#popout').animate({
        left: 0
    }, 'slow', function () {
        $('#trigger span').html('Close');  //change the trigger text at end of animation
    });
}

function hidePopout() {
    $('#popout').animate({
        left: -40
    }, 'slow', function () {
        $('#trigger span').html('Show');  //change the trigger text at end of animation
    });
}

Answer 3

I had a similar issue where I had the menu behind my content and was pushing my content to the left to reveal the facebook style menu hidden behind.

I was applying 'absolute' positioning to mimic the slide across and taking the content out of the document flow. With overflow hidden it seemed you could pull the content layer over with touch (which sounds like the same issue as you encountered). Even with overflow std, x & y set on almost everything this still occurred. This was also with width:100% on body etc.

Changing the content layer to 'relative' when I slid this across and then reducing the height of the content (while the menu was open) to the windows height seemed to work for me and seemed fairly robust over devices.

Good luck, that should help for anyone experiencing a similar issue.

Thanks, Dave

Answer 4

Here's a quicky. The thing is it ONLY works if you define your modal's height. Without the height defined it won't work. Set the dialog to height 100% & overflow hidden. Then set the content to position: absolute, top: 0, bottom: 0, left: 0, right: 0, margin: auto and define the height (in below example 250px for a login modal). I know it sounds irrational - it probably is a CSS glitch, but: it works - cross browser & cross platform (haven't checked iPhone).

<div class="modal-dialog" style="height:100%;overflow:hidden"><div class="modal-content" style="position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;height:250px;">