캔버스 외부 메뉴에 CSS 오버 플로우 -X 문제가 있습니다.

Question

오른쪽에서 표시되는 오프 캔버스 메뉴를 만들려고합니다. 본문 요소에는 메뉴가있는 nav 태그가 있습니다. 탐색 태그의 절대 위치 및 오른쪽 속성은 브라우저 윈도우 외부에 있어야하므로 음수 값으로 설정됩니다. Body의 너비는 100 %이고 overflow-x는 hidden으로 설정됩니다. jquery를 사용하여 body 요소에서 css 'opened'클래스를 토글합니다. 그러면 body가 왼쪽으로 이동하고 nav가 나타납니다.

HTML을 부분 :

<a href="#" class="openMenu">MENU</a> 
    <nav> 
     <ul> 
      <li><a href="#">Link 1</a></li> 
      <li><a href="#">Link 1</a></li> 
      <li><a href="#">Link 1</a></li>   
     </ul> 
    <nav> 

CSS 부분 :

body{ 
    position: relative; 
    overflow-x: hidden; 
    width: 100%; 
    left: 0; 
    top: 0; 
    background: orange; 
} 

body.opened{ 
    left: -150px; 
} 

nav{ 
    position: absolute; 
    right: -150px; 
    top:0; 
    background: grey; 
    width: 150px; 
    z-index: 99999; 
} 

body, body.opened{ 
    -webkit-transition: all 0.3s ease-in-out; 
    -moz-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 
} 

a.openMenu{ 
    position: absolute; 
    top: 0; 
    left: 50%; 
    color: white; 
} 

ul{ 
    list-style: none; 
} 

nav ul li a{ 
    color: white; 
} 

JQuery와 부분 : http://jsfiddle.net/EwCVH/
라이브 예 : http://vital-element.com

을

다음

$('a.openMenu').click(function(){ 
    $('body').toggleClass('opened'); 
    return false; 
}); 

이이 같은 모습입니다

PC에서 모든 것이 잘되지만, 예를 들어 휴대 전화에서 열면 overflow-x 속성이 더 이상 작동하지 않아 가로로 스크롤하여 클릭 할 때만 열리는 숨겨진 탐색을 볼 수 있습니다.

html 태그에 hidden overflow-x 속성을 추가하려고했지만 터치 장치에서 가로 스크롤을 숨기려고했지만 메뉴를 열려고 할 때 본문 만 왼쪽으로 이동하면 메뉴가 오버플로 속성에 의해 숨겨 짐을 느낍니다.).

제안 사항? 감사합니다. .

Answer 1

과학적 설명은 없지만 슬라이딩 nav 요소 위치를 고정으로 변경하면이 문제를 해결할 수 있으며 안드로이드는 더 이상 nav가 뷰포트의 일부라고 생각하지 않습니다.

바로 지금 메뉴 속성에 따라 jquery를 사용하여 바꿀 수있는 올바른 속성을 가진 2 개의 클래스를 사용합니다.

.menuRight{ 
    right: -150px; 
} 

.menuLeft{ 
    right: 0px; 
}