[css] Overflow-x : hidden으로 인해 모바일 브라우저에서 컨텐츠가 넘치지 않습니다.
(가)부터 데스크톱 브라우저에서 조회, 검은 색 메뉴 표시 줄이 제대로 만 윈도우의 가장자리로 확장 body있다overflow-x:hidden .
Android 또는 iOS와 같은 모든 모바일 브라우저에서 검은 색 메뉴 표시 줄에 전체 너비가 표시되어 페이지 오른쪽에 공백이 생깁니다. 내가 알 수있는 한,이 공백은 html또는body 태그 .
뷰포트를 특정 너비로 설정하더라도 <head>:
<meta name="viewport" content="width=1100, initial-scale=1">사이트가 1100 픽셀로 확장되지만 여전히 1100 이상의 공백이 있습니다.
내가 무엇을 놓치고 있습니까? 뷰포트를 1100으로 유지하고 오버플로를 차단하려면 어떻게해야합니까?
답변
내부 사이트 래퍼 DIV를 생성 <body>하고 적용 overflow-x:hidden받는 래퍼 대신 <body>또는<html> 고정 문제.
<meta name="viewport">태그 를 구문 분석하는 브라우저는 단순히 overflow속성을 무시 html하고body 태그의 .
참고 : position: relative래퍼 div 에 추가해야 할 수도 있습니다 .
답변
시험
html, body {
overflow-x:hidden
} 그냥 대신
body {
overflow-x:hidden
}답변
허용 된 답변 에 대한 VictorS 의 의견 실제로 일을하는 매우 우아한 솔루션이기 때문에 자체 답변이 필요합니다. 유용성에 약간을 추가하겠습니다.
빅터는 position:fixed작품을 추가하는 메모 .
body.modal-open {
overflow: hidden;
position: fixed;
}그리고 실제로 그렇습니다. 그러나 본질적으로 맨 위로 스크롤하는 약간의 부작용이 있습니다.position:absolute이 문제를 해결하지만 모바일에서 스크롤하는 기능을 다시 소개합니다.
뷰포트 ( 뷰포트를 추가하기위한 플러그인)를<body> 알고 있다면 에 대한 CSS 토글을 추가 할 수 있습니다 position.
body.modal-open {
// block scroll for mobile;
// causes underlying page to jump to top;
// prevents scrolling on all screens
overflow: hidden;
position: fixed;
}
body.viewport-lg {
// block scroll for desktop;
// will not jump to top;
// will not prevent scroll on mobile
position: absolute;
}또한 모달을 표시하거나 숨길 때 기본 페이지가 왼쪽 / 오른쪽으로 점프하지 않도록 이것을 추가합니다.
body {
// STOP MOVING AROUND!
overflow-x: hidden;
overflow-y: scroll !important;
}답변
Safari에서 수평 스크롤을 해결하는 가장 간단한 솔루션입니다.
html, body {
position:relative;
overflow-x:hidden;
}답변
@Indigenuity 상태에서 이는 브라우저가 <meta name="viewport">태그를 구문 분석하여 발생하는 것으로 보입니다 .
소스에서이 문제를 해결하려면 다음을 시도하십시오.
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">.
내 테스트에서 이것은 사용자가 오버플로 된 내용을보기 위해 축소하지 못하게하여 결과적으로 패닝 / 스크롤을 방지합니다.
답변
body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;iOS9에서 작동
답변
뷰포트를 그대로 유지하십시오. <meta name="viewport" content="width=device-width, initial-scale=1.0">
연속 검은 막대의 효과를 오른쪽으로 가정하고 100 %를#menubar 초과하지 않아야 한다고 가정하고 오른쪽의 사각형이되도록 테두리 반경을 조정 하고 오른쪽으로 조금 확장되도록 패딩을 조정하십시오. . 다음을 수정하십시오 .#menubar
border-radius: 30px 0px 0px 30px;
width: 100%; /*setting to 100% would leave a little space to the right */
padding: 0px 0px 0px 10px; /*fills the little gap*/조정 padding과정 잎의 10px 바의 가장자리에 왼쪽 메뉴에, 당신은 나머지 둘 수 40px을 의 각 li, 20 픽셀 양쪽에 좌우 :
.menuitem {
display: block;
padding: 0px 20px;
}브라우저 크기를 작게 조정하면 여전히 흰색 배경을 찾을 수 있습니다 body. div에서 대신 배경 질감을 배치하십시오 . 또는 미디어 쿼리를 사용하여 탐색 메뉴 너비를 100 %에서 낮은 값으로 조정하십시오. 적절한 레이아웃을 만들기 위해 코드를 많이 조정해야합니다. 무엇을할지 모르겠지만 위의 코드는 어쨌든 넘친 막대를 수정합니다.
