모바일 웹 페이지에서 가로 스크롤 사용 안 함

Question

Facebook과 같은 사이드 메뉴 버튼을 사용하여이 간단한 모바일 웹 페이지를 구축하려고합니다. CSS overflow-x : hidden으로 가로 스크롤을 사용하지 않으려 고합니다. 그러나 작동하지 않습니다. 여기 내 코드는 어떤 도움이 크게 감사 것입니다 :

<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

내가 바이올린에 코드를 넣어 가지고 있지만 머리에 '줌'메타 태그를 추가 할 수 없습니다, 그래서에서 테스트하기 어렵 내 전화. http://jsfiddle.net/Pevara/Ku5nY/1/show/

스크롤바가 없어도 데스크탑에서는 정상적으로 작동합니다. 그것은 차이를 만들 것입니다

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

확실하지 않음 경우, 그러나 ...

Answer 2

데이비드 시도 가치가있다 :

나는 당신의 CSS에 다음을 추가했다. 당신은 당신의 코드에 적응하는 데 사용할 수있는 경우 또는 http://mmenu.frebsite.nl/

, 이것 좀 봐, 그리고 참조 :

당신이 사용 해봤

http://jsfiddle.net/tzDjA/

당신은 거기에 알 수 3 함수 :

$('#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

나는 내 콘텐츠 뒤에 메뉴가 있고 왼쪽에 내 콘텐츠를 밀고있는 비슷한 문제가있었습니다. 뒤에 숨겨진 페이스 북 스타일 메뉴를 보여줍니다.

슬라이드를 모방하고 내용을 문서 흐름에서 빼내기 위해 '절대'위치 지정을 적용하고있었습니다. 오버플로가 숨겨져 있으면 터치로 콘텐츠 레이어를 당길 수있는 것처럼 보였습니다 (이 문제는 발생한 문제와 비슷합니다). 심지어 오버플로 표준과 함께, x & y 거의 모든 것이 여전히 발생했습니다. 이것은 너비 : 몸에 100 %입니다.

이것을 가로 질러 슬라이드 한 다음 (메뉴가 열린 상태에서) 콘텐츠 높이를 줄이면 콘텐츠 계층을 '상대'로 변경하여 Windows 높이로 보입니다. 나를 위해 일하면서 장치에 비해 꽤 강건 해 보였습니다.

행운을 비네, 비슷한 문제가 발생하면 도움이 될 것입니다.

감사합니다, 데이브

Answer 4

는 여기 quicky입니다. 것은 당신이 당신의 모달의 높이를 정의하는 경우에만 작동합니다. 정의 된 높이가 없으면 작동하지 않습니다. 대화 상자를 높이 100 %로 설정하십시오. & 오버플로가 숨겨져 있습니다. 그런 다음 위치를 절대, 상단 : 0, 하단 : 0, 왼쪽 : 0, 오른쪽 : 0, 여백 : 자동으로 설정하고 높이를 정의하십시오 (예 : 로그인 모달의 경우 250 픽셀 이하). 비합리적으로 들릴지도 모릅니다. 아마도 CSS 결함 일 수도 있지만, 작동합니다 - 교차 브라우저 & 크로스 플랫폼 (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;">