Overflow-x : hidden으로 인해 모바일 브라우저에서 컨텐츠가 넘치지 않습니다.

142

(가)부터 데스크톱 브라우저에서 조회, 검은 색 메뉴 표시 줄이 제대로 만 윈도우의 가장자리로 확장 body있다overflow-x:hidden .

Android 또는 iOS와 같은 모든 모바일 브라우저에서 검은 색 메뉴 표시 줄에 전체 너비가 표시되어 페이지 오른쪽에 공백이 생깁니다. 내가 알 수있는 한,이 공백은 html또는body 태그 .

뷰포트를 특정 너비로 설정하더라도 <head>:

<meta name="viewport" content="width=1100, initial-scale=1">

사이트가 1100 픽셀로 확장되지만 여전히 1100 이상의 공백이 있습니다.

내가 무엇을 놓치고 있습니까? 뷰포트를 1100으로 유지하고 오버플로를 차단하려면 어떻게해야합니까?

— 독창성
소스

1

이것은 iOS9에서 특히 문제입니다

— Chuck Le Butt

270

내부 사이트 래퍼 DIV를 생성 <body>하고 적용 overflow-x:hidden받는 래퍼 대신 <body>또는<html> 고정 문제.

<meta name="viewport">태그 를 구문 분석하는 브라우저는 단순히 overflow속성을 무시 html하고body 태그의 .

참고 : position: relative래퍼 div 에 추가해야 할 수도 있습니다 .

— 독창성
소스

44

나는로 설정하는 것 외에도로 설정해야 overflow한다는 hidden것을 알았 position습니다 fixed.

— Victor S

16

고정 위치에 위치를 추가하면 스크롤 할 수 없습니다!

— 이론

5

나는 모든 코드를 div 안에 넣고 overflow-x : hidden을 주었지만 작동하지 않는다. <meta name = "viewport"content = "width = device-width, initial-scale = 1"> 너무하지만 아무것도 바뀌지 않았습니다 : / 어떤 아이디어?

4

overflow-x: hidden이 메타 태그를 추가 한 후에도 @leepowers 가 여전히 작동하지 않습니다. 작동중인 웹 사이트에 대한 링크를 공유 할 수 있습니까?

— 목성

3

이봐, 내가 그 position:relative일을 발견했을 때 .

— Thomas Valadez

80

시험

html, body {
  overflow-x:hidden 
}

그냥 대신

body {
  overflow-x:hidden 
}

— 거미류
소스

7

고맙지 만, overflow어떤 것에 적용 html하거나 body조합하여도 문제가 해결되지 않았습니다.

— 고유성

문제가 해결되지 않아 죄송합니다. 대답하기 전에 귀하의 사이트를 사용하고 CSS에 제안을 적용하여 빠른 테스트를 수행했습니다. 내 안드로이드 폰의 표준 및 돌고래 브라우저의 문제를 최소한 수정했습니다.

— subarachnid

3

나를 위해 일했다. eduardd.eu/projects/ezo는 (480 992px 바닥 글 사이의 여자와 수건의 넘치는 이미지에 문제가 있었다)

— 에드워드

2

body {}와 html {}을 별도로 지정할 때 이것이 왜 작동하는지 아는 사람이 있습니까?

— hamncheez

1

또한 추가해야 할 height:100%;경우 이미지가로드 된 페이지 (페이지 높이가 커짐)에서 세로 스크롤이 제대로 작동하지 않습니다.

— Arno van Oordt '

69

허용 된 답변 에 대한 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;
}

— 브래드
소스

2

어쨌든 모바일 부품이 맨 위로 이동하지 못하게해야합니까?

— WraithKenny

1

나를 위해 일한 것은 오버플로로 숨겨져 있던 요소를 위치 : 절대 위치에서 고정으로 돌리는 것이 었습니다. 고맙게도

— Chuck Le Butt이 (가)

1

@WraithKenny-페이지가 모바일 장치에서 맨 위로 이동하지 못하게하려면 다음 핵 / 미묘한 접근 방식을 사용할 수 있습니다. 모달 함수 내에서 모달 스타일을 함께 적용하고 몸의 상단 여백을 현재 오프셋의 마이너스와 동일하게 설정하는 것보다 무언가를하기 전에 현재 스크롤 오프셋을 가져와야합니다. 모달을 제거 할 때 여백을 다시 0으로 설정하고 페이지를 원래 오프셋으로 다시 스크롤하십시오.

— Emil Borconi

2

이 솔루션은 모달의 내용이 화면에 맞는 경우에만 작동합니다. 즉 모달 자체를 스크롤 할 필요가 없습니다.

— Tobias

내 페이지에는 다른 고정 및 절대 위치 요소가 있습니다. 몸이 position:fixed or absolute자신의 위치를 방해하게 만듭니다. 내 경우에는 적합하지 않거나 작동하지 않음 :(

— sohaiby

31

Safari에서 수평 스크롤을 해결하는 가장 간단한 솔루션입니다.

html, body {
  position:relative;
  overflow-x:hidden;
}

— 발 투르 부에 르크
소스

1

작동하는 것 같습니다. 그러나 왜 이것이 작동하는지 설명이 있습니까?

— LarS

아니요, 마침내 작동하지 않았습니다. 나는 수학을 끝내고 div가 허용 된 것보다 넓지 않은지 확인했습니다 .css calc ()는 상대 너비 (vw 또는 %)와 절대 너비 (px)의 혼합을 허용하므로 여기에서 많은 도움이되었습니다.

— LarS December

물론 이것은 해결 방법입니다. 여전히 어딘가에 넘친 것이 있습니다. 이제 막 잘 렸습니다. CSS 규칙을 추가해보십시오. * {outline : 1px solid red; } 여전히 넘친 요소를 찾을 수 없다면 어딘가에 여백이있을 수 있습니다. * {margin : 0! IMPORTANT; } 오버플로가 사라지는 지 확인하십시오.

— Waltur Buerk

나를 위해 작동합니다. 숨겨진 요소가 몸의 너비를 변경한다는 사실에 흥미가 있습니다. 그러나 나에게 이것은 모바일 브라우저뿐만 아니라 모든 Safari 브라우저의 경우입니다. Bootstrap 4 table-responsive버그 를 수정해야했습니다 . 이것이 해결책이었습니다.

— CunningFatalist

2

2019 년에도 이것이 여전히 문제라고 믿을 수는 없지만 위의 해결책은 완전히 효과가있었습니다. 고마워.

— staxim

28

@Indigenuity 상태에서 이는 브라우저가 <meta name="viewport">태그를 구문 분석하여 발생하는 것으로 보입니다 .

소스에서이 문제를 해결하려면 다음을 시도하십시오.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">.

내 테스트에서 이것은 사용자가 오버플로 된 내용을보기 위해 축소하지 못하게하여 결과적으로 패닝 / 스크롤을 방지합니다.

— 튀튀 르툴
소스

initial-scale=1기존 뷰포트 메타 태그에 추가하면 실제로 문제가 해결됩니다. 감사!

— JamesWilson

6

나를 위해 그것은 minimum-scale=1고정되었습니다

— jpenna

이것은 다른 모든 것을 시도한 후에 실제로 나를 위해 일한 것입니다. 고마워요!

— Harsh Limaye

16

body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;

iOS9에서 작동

— 올리오
소스

3

당신이 맨 위로 스크롤 할 않는 본체에 고정 : 그것은 작동하지만 위치 퍼팅을한다

— ThaoD5

1

이상하지만 고정 된 위치없이 나를 위해 일했습니다. 여기에 모든 솔루션 중 하나만 있습니다!

— 가라 바니

chrom과 boostrap + angularJS를 사용하여 나를 위해 일한 사람

— kiwicomb123

6

뷰포트를 그대로 유지하십시오. <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 %에서 낮은 값으로 조정하십시오. 적절한 레이아웃을 만들기 위해 코드를 많이 조정해야합니다. 무엇을할지 모르겠지만 위의 코드는 어쨌든 넘친 막대를 수정합니다.

— 앤
소스

사용 box-sizing: border-box;하면 100 % 너비 div에 패딩을 추가 할 수 있습니다.

— Charles John Thompson III

6

본문 내에 사이트 래퍼 div를 만들고 본문의 래퍼 INSTEAD 또는 html에 overflow-> x : hidden을 적용하면 문제가 해결되었습니다.

이것은 또한 추가 한 후 나를 위해 일했습니다. position: relative래퍼에 있었습니다.

— 이삭 F
소스

이것은 나를 위해 일했습니다. 부작용은 하나 대신 두 개의 스크롤 막대가 있다는 것입니다. 해결책은 overflow: hidden대신에 만드는 것이 었습니다 overflow-x: hidden. OSX 및 Win의 모바일 Safari, Chrome, IE11에서 작동합니다.

— pop

4

<div>콘텐츠 전체에 래퍼를 추가 하면 실제로 작동합니다. 의미 상 "icky"이지만 body태그 안에 overflowWrap 클래스가있는 div를 추가 한 다음 CSS를 다음과 같이 설정했습니다.

html, body, .overflowWrap {
overflow-x: hidden;
}

과잉이 될 수도 있지만 매력처럼 작동합니다!

— MBurnette
소스

4

나는 안드로이드 장치와 동일한 문제가 발생했지만 iOS 장치는 아닙니다. 절대 위치 요소의 외부 div에 position : relative를 지정하여 해결하도록 관리합니다 (외부 div의 경우 overflow : hidden 사용)

— 곽 팬 펑
소스

4

이전의 단일 솔루션이 저에게 효과적이지 않았으므로 혼합하여 구형 장치 (iphone 3)에서도 문제가 해결되었습니다.

먼저 html 내용을 외부 div로 감싸 야했습니다.

<html>
  <body>
    <div id="wrapper">... old html goes here ...</div>
  </body>
</html>

overflow-x가 작동하지 않기 때문에 래퍼에 숨겨진 오버플로를 적용해야했습니다.

  #wrapper {
    overflow: hidden;
  }

이 문제를 해결했습니다.

— 스파게티
소스

이것은 @Indigenuity의 답변과 어떻게 다릅니 까?

— Ian Kemp

3

@ian Kemp overflow : hidden! = overflow-x : hidden

— spaghetticode

3

overflow-x : hidden을 사용하여 문제를 해결했습니다. 다음과 같이

@media screen and (max-width: 441px){

#end_screen { (NOte:-the end_screen is the wrapper div for all other div's inside it.)
  overflow-x: hidden;
   }
 }

구조는 다음과 같습니다

1st div end_screen >> inside it >> end_screen_2(div) >> inside it >> end_screen_2.

'end_screen is the wrapper of end_screen_1 and end_screen_2 div's

— 비 카스에 타기
소스

3

subarachnid가 말했듯이 body와 html 모두에 overflow-x가 숨겨져 있습니다.

**HTML**
<div class="contener">
  <div class="menu">
  das
  </div>
  <div class="hover">
    <div class="img1">
    First Strip
    </div>
     <div class="img2">
    Second Strip
    </div>
</div>
</div>
<div class="baner">
dsa
</div>

**CSS**
body, html{
  overflow-x:hidden;
}
body{
  margin:0;
}
.contener{
  width:100vw;
}
.baner{
   background-image: url("http://p3cdn4static.sharpschool.com/UserFiles/Servers/Server_3500628/Image/abstract-art-mother-earth-1.jpg");
   width:100vw;
   height:400px;
   margin-left:0;
   left:0;
}
.contener{
  height:100px;
}
.menu{
  display:flex;
  background-color:teal;
  height:100%;
  justify-content:flex-end;
  align:content:bottom;
}
.img1{
  width:150px;
  height:25px;
  transform:rotate(45deg);
  background-color:red;
  position:absolute;
  top:40px;
  right:-50px;
  line-height:25px;
  padding:0 20px;
  cursor:pointer;
  color:white;
  text-align:center;
  transition:all 0.4s;
}
.img2{
  width:190px;
  text-align:center;
  transform:rotate(45deg);
  background-color:#333;
  position:absolute;
  height:25px;
  line-height:25px;
  top:55px;
  right:-50px;
  padding:0 20px;
  cursor:pointer;
  color:white;
  transition:all 0.4s;
}
.hover{
  overflow:hidden;
}
.hover:hover .img1{
  background-color:#333;
  transition:all 0.4s;
}
.hover:hover .img2{
  background-color:blue;
  transition:all 0.4s;
}

링크

— 스카이 린 R
소스

1

방금 몇 시간 동안이 작업을 수행 했으며이 페이지와 다른 페이지의 다양한 조합을 시도했습니다. 결국 나를 위해 일한 것은 허용 된 답변에서 제안한 것처럼 사이트 래퍼 div를 만드는 것이지만 x 오버플로 대신 두 오버플로를 모두 숨김으로 설정하는 것이 었습니다. 스크롤 할 때 overflow-y를 그대로두면 세로로 몇 픽셀 만 스크롤 한 다음 중지되는 페이지가 나타납니다.

#all-wrapper {
  overflow: hidden;
}

body 또는 html 요소에 아무것도 설정하지 않고 이것으로 충분했습니다.

— 고가
소스

1

이 주제의 답글에서 여러 가지 방법을 시도했지만 대부분 작동하지만 overflow-x를 사용 body,html하는 경우 사용자가 모바일에서 아래로 스크롤 할 때 페이지가 느려지거나 정지 될 수있는 것과 같은 부작용 이 있습니다.

사용하다 position: fixed본문 내부의 래퍼 / div에서 하는 것도 좋지만 메뉴가 있고 자바 스크립트를 사용하면 애니메이션 스크롤을 일부 섹션으로 클릭하면 작동하지 않습니다.

그래서 나는 touch-action: pan-y pinch-zoom몸 안의 포장지 / div 를 사용하기로 결정했습니다 . 문제 해결됨.

— 지라 유 L
소스

0

부트 스트랩 모달 (양식 포함)에 대해이 문제를 해결하는 유일한 방법은 CSS에 다음 코드를 추가하는 것입니다.

.modal {
    -webkit-overflow-scrolling: auto!important;
}

— 토비아스
소스