나는이 웹 사이트를 개발 중입니다. body 태그 안에는 두 개의 절대 위치 div가 나란히 있습니다. 하나는 창 너비의 100 %이고 다른 하나는 80 %입니다. 그들은 윈도우의 100 % 너비 인 body 태그로 싸여 있습니다.오버플로 된 내용으로 요소 내부를 스크롤하지 못하도록하는 자바 스크립트 또는 CSS
본문에는 80 % 너비 div를 숨기고 가로 스크롤을 방지하기 위해 "overflow-x : hidden"이 추가되었습니다. 지금까지는 모바일 장치에서는 스크롤 할 수없는 콘텐츠 (두 번째 div)로 드래그 (스크롤) 할 수 있다는 것을 제외하고는 매우 좋습니다. 마우스 휠을 좌우로 스크롤 (마우스 가운데 버튼을 누르고 마우스를 오른쪽과 왼쪽으로 드래그)하면 똑같은 일이 발생합니다. 두 번째 요소 (너비 80 % 너비)를 너비 0 %로 만들지 않고 어떻게 스크롤을 막을 수 있습니까?
이것은 웹킷 브라우저 및 단일 축에서 오버플로를 처리하는 방식과 관련하여 문제가되는 것으로 보입니다. Firefox가 영향을받지 않는 것으로 나타났습니다.
이 비율을 기준으로 높이가 overflow-x:hidden의 조합에 의해 트리거 될 수 것 같습니다 실험의 비트 후 -이 fiddle 볼이 문제가 처음에 여기에 존재하지 않습니다하지만 당신은 height:100% CSS의 주석을 해제하고 다시 실행하면, 당신은 그 문제 매니페스트를 알 수 있습니다 : 다른 언급
http://jsfiddle.net/OACDesigns/WFkSY/6/
, 나는이 시간에 최고의 솔루션을 필요에 따라 탐색 메뉴 요소에 display:none을 사용하는 것입니다 생각합니다. 다른 방법은 레이아웃을 구조화하고 스타일을 지정하는 방법을 다시 생각해보고이 버그를 유발하지 않는 방식으로 시도하는 것입니다.
위대한 답변, 문제를 최소한 발견! –
높이 속성을 추가하지 않아도 문제가 발생할 수 있습니다. 마우스로 클릭하고 클릭 한 채로 오른쪽으로 드래그하면 오버 플로우 영역에 위치하기 때문에 숨겨져 있어야하는 80 % sidenav로 스크롤 할 수 있습니다. 웹킷처럼 사파리, 크롬 또는 오페라가 아닌 오버 플로우 -x를 전혀 처리 할 수없는 것 같습니다. : / – rpk
몸체에 오버플로를 숨기는 대신'#mobileNav {display : none;} '을 추가 할 수 있습니까? – 13ruce1337
해결할 여유가 없어서 표시 할 수 없습니다. 너는 나에게 시도 할 생각을했다. 고맙습니다. 그러나 나는 다른 제안들도 열거 나, 그 행동을 무력화하거나 무효로하는 방법에 대한 일반적인 대답 (마우스 휠 스크롤을 누른 것)을 열었다. –