Overflow-x : 숨김으로 인해 모바일 브라우저에서 컨텐츠가 넘치지 언어로 작성되었습니다.
데스크톱 브라우저에서 조회, 검은 색 메뉴 표시 줄 제대로 이후에만 창의 가장자리까지 확장 body이있다 overflow-x:hidden.
Android 또는 iOS와 같은 모든 모바일 브라우저에서 검은 색 메뉴 표시 줄에 전체 너비가 표시되어 페이지 오른쪽에 공백이 생깁니다. 내가 알 수있는 한,이 공백은 html또는 body태그 의 일부조차도 아닙니다 .
뷰포트를 특정 너비로 설정 <head>:
<meta name="viewport" content="width=1100, initial-scale=1">
사이트가 1100 픽셀로 확장 확장은 여전히 1100 이상의 공백이 있습니다.
내가 무엇을 놓치고 있습니까? 뷰포트를 1100으로 유지하고 오버플로를 차단해야합니까?
내부에 사이트 래퍼 div 를 작성 래퍼 INSTEAD에 body적용 하거나 문제를 해결했습니다.overflow-x:hiddenbodyhtml
<meta name="viewport">태그 를 구문 분석하는 브라우저는 문자 및 태그의 overflow속성을 무시 합니다 .htmlbody
시험
html, body {
overflow-x:hidden
}
그냥 대신
body {
overflow-x:hidden
}
된 답변 허용 에, 대한 승리자 의 의견은 실제로 일을하는 매우 우아한 솔루션이기 때문에 자체 답변이 필요합니다. 유용성에 약간을 추가하겠습니다.
빅터는 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에서 작동
본문 고유 사이트 래퍼 div를 작성 본문의 래퍼 INSTEAD 또는 html에 overflow-> x : 숨김을 적용하면 문제가 해결됩니다.
position: relative래퍼에 추가 한 후에도 효과가 있습니다.
뷰포트를 그대로 유지 : <meta name="viewport" content="width=device-width, initial-scale=1.0">
: 당신은 오른쪽으로 연속 검정색 막대의 효과를 달성하고자하는 가정 #menubar초과 할 수 없습니다 100 % 조정], 국경 반경을 오른쪽 제곱하고 그래서 오른쪽으로 더 조금 확장 패딩을 조정합니다. 다음을 수정하십시오 #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, 20px 에 배치 할 수 있습니다 .
.menuitem {
display: block;
padding: 0px 20px;
}
브라우저 크기를 더 작게 조정해도 여전히 흰색 배경이 표시됩니다. 대신 배경을 div에서 body. 또는 미디어 쿼리를 사용하여 탐색 메뉴 너비를 100 %에서 낮은 값으로 조정합니다. 적절한 레이아웃을 만들기 위해 코드를 많이 조정해야합니다. 무엇을 하려는지 잘 모르겠지만 위의 코드는 오버플로 막대를 수정합니다.
<div>콘텐츠 전체에 래퍼를 추가 하면 작동합니다. 의미 론적으로 "icky"하면서 body태그 안에 overflowWrap 클래스가있는 div를 추가 한 다음 CSS를 다음과 같이 설정합니다.
html, body, .overflowWrap {
overflow-x: hidden;
}
지금은 과잉 일 수도있을 매력처럼 작동합니다!
Android 기기에서는 문제가 발생했지만 iOS 기기에서는 발생하지 않습니다. 절대 위치 요소의 외부 div에 위치 : 상대를 지정하여 해결하도록 관리했습니다 (외부 div에 대해 오버플로 : 숨김 사용).
이전의 단일 솔루션이 나에게 효과가 없었기 때문에 혼합해야 이전 장치 (iphone 3)가 해결되었습니다.
먼저 html 콘텐츠를 외부 div로 래핑해야합니다.
<html>
<body>
<div id="wrapper">... old html goes here ...</div>
</body>
</html>
그런 다음 overflow-x가 작동하지 않기 때문에 래퍼에 숨겨진 오버플로를 적용해야합니다.
#wrapper {
overflow: hidden;
}
그리고이 문제를 해결했습니다.
overflow-x : 숨김을 사용하여 문제를 해결했습니다. 다음과 같이
@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
거미류 아래의 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;
}
나는 이것에 대해 몇 시간 동안 일하고, 이것과 다른 페이지의 다양한 조합을 시도했습니다. 결국 나를 위해 일한 것은 허용 된 답변에서 제안한 것처럼 사이트 래퍼 div를 만들었지 만 두 오버플로를 x 오버플로 대신 숨김으로 설정하는 것이 었습니다. 스크롤 할 때 overflow-y를두면 세로로 몇 픽셀 만 스크롤 한 다음 중지되는 페이지가 나타납니다.
#all-wrapper {
overflow: hidden;
}
body 또는 html 요소에 아무것도 설정하지 않고 이것으로 충분했습니다.
내 부트 포함 모달 (양식 포함)에 대해이 문제를 해결하는 유일한 방법은 내 CSS에 다음 코드를 추가하는 것입니다.
.modal {
-webkit-overflow-scrolling: auto!important;
}
'IT' 카테고리의 다른 글
| PostgreSQL에없는 경우 열을 추가하는 방법은 무엇입니까? (0) | 2020.07.12 |
|---|---|
| SQL 키워드에 대문자를 사용할 이유가 있습니까? (0) | 2020.07.12 |
| MySQL에서 다음 / 이전 기록을 얻는 방법? (0) | 2020.07.12 |
| iOS 7에서 UITextView 높이가있는 UITableViewCell? (0) | 2020.07.12 |
| 신속한 배열-색인이 존재하는지 확인 (0) | 2020.07.12 |