overflow-x:숨김으로 모바일 브라우저에서 콘텐츠가 넘쳐나는 것을 방지하지 못합니다.
여기에 웹사이트가 있습니다.
에서 볼 때 은 창됩니다.body가지다overflow-x:hidden.
Android든 iOS든 모든 모바일 브라우저에서 검은색 메뉴 모음은 페이지 오른쪽에 공백을 제공하는 전체 너비를 표시합니다.내가 알 수 있는 한, 이 하얀 공간은 심지어 그 일부도 아닙니다.html아니면body꼬리표를 붙이기
에서 특정 <head>:
<meta name="viewport" content="width=1100, initial-scale=1">
사이트가 1100px로 확장되지만 1100을 넘는 공백이 여전히 있습니다.
제가 무엇을 빠뜨리고 있나요?뷰포트를 1100으로 유지하고 오버플로를 차단하려면 어떻게 해야 합니까?
에 를 를 안에 사이트 래퍼 div 만들기<body>를 하는 것.overflow-x:hidden대신 포장지로<body>아니면<html>문제를 해결했습니다.
가 과 하는 처럼 를 구문 분석하는 브라우저로 나타납니다.<meta name="viewport">태그를 간단히 무시합니다.overflow의의 속성html그리고.body꼬리표를 붙이기
: 해야 도 도 해야 합니다.position: relative랩퍼 디브에게.
해라
html, body {
overflow-x:hidden
}
만이 아니라
body {
overflow-x:hidden
}
수락된 답변에 대한 Victor S의 코멘트는 정말로 효과가 있는 매우 우아한 솔루션이기 때문에 그 자체의 답변이 될 자격이 있습니다.그리고 유용성을 좀 더 보태겠습니다.
에 를 합니다.position:fixed작동하다.
body.modal-open {
overflow: hidden;
position: fixed;
}
그리고 확실히 그렇습니다.하지만, 본질적으로 상단으로 스크롤하는 부작용도 조금 있습니다.position:absolute는 이 문제를 해결하지만 모바일에서 스크롤할 수 있는 기능을 다시 도입합니다.
만약 당신이 당신의 뷰포트(에 뷰포트를 추가하기 위한 나의 플러그인)를 알고 있다면 당신은 단지 에 대한 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;
}
@말한 것처럼,가 @Indigenuity , 은 가 에 하는 으로 으로 하는 에 <meta name="viewport">꼬리표를 매다
소스에서 이 문제를 해결하려면 다음을 시도합니다.
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">.
테스트에서 이 기능은 사용자가 오버플로된 콘텐츠를 보기 위해 축소하는 것을 방지하며, 그 결과 사용자에게 이동/스크롤하는 것도 방지합니다.
사파리에서 가로 스크롤을 해결하는 가장 간단한 솔루션입니다.
html, body {
position:relative;
overflow-x:hidden;
}
body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;
iOS9에서 작동합니다.
본문 내부에 사이트 래퍼 div를 생성하여 본문 또는 html 대신 래퍼에 overflow->x:hidden을 적용하여 문제를 해결하였습니다.
이것은 또한 추가한 후에 저에게 효과가 있었습니다.position: relative
그대로 합니다: 는 합니다 합니다 는 .<meta name="viewport" content="width=device-width, initial-scale=1.0">
되는 검은색 하면 다음과 같습니다.#menubar100%를 넘지 않아야 하며, 오른쪽이 정사각형이 되도록 테두리 반경을 조정하고 오른쪽으로 조금 더 늘어나도록 패딩을 조정합니다.다음을 당신의 것으로 수정합니다.#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;
}
더 작게 됩니다. 에서 를 하면 이 이 를 배경 질감을 div에서 다음으로 대신 배치합니다.body쿼리를 를 100에서 더 합니다. 또는 미디어 쿼리를 사용하여 탐색 메뉴 너비를 100%에서 더 낮은 값으로 조정합니다.적절한 레이아웃을 만들기 위해 코드를 수정해야 할 많은 사항이 있습니다. 어떻게 할 것인지는 모르겠지만 위 코드는 어떻게든 당신의 넘치는 막대를 고칠 수 있을 것입니다.
이전의 단일 솔루션으로는 효과가 없었기 때문에 이를 혼합해야 했고 오래된 기기(아이폰 3)에서도 문제를 해결했습니다.
먼저 html 콘텐츠를 외부 div로 래핑해야 했습니다.
<html>
<body>
<div id="wrapper">... old html goes here ...</div>
</body>
</html>
overflow-x가 작동하지 않기 때문에 포장지에 숨겨진 overflow를 적용해야 했습니다.
#wrapper {
overflow: hidden;
}
그리고 이것으로 문제가 해결되었습니다.
<div>당신의 콘텐츠 전체가 정말 효과가 있을 것입니다.면서도, 으로 하다 서도 "는 "가 "로 "에 "는 "했습니다 "를 " "e "e "" "k "했습니다 "서도 "y "r "f "하다 " "n a 에 t i "body태그를 지정한 다음 내 CSS를 다음과 같이 설정합니다.
html, body, .overflowWrap {
overflow-x: hidden;
}
지금은 과잉 살상일 수도 있지만, 매력적으로 작용합니다!
안드로이드 기기에서도 같은 문제가 발생했지만 iOS 기기에서는 문제가 발생하지 않았습니다.위치를 지정하여 해결 관리:절대 위치 요소의 외부 div에서 상대적(오버플로: 외부 div에 대해 숨김)
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
subarachnid가 말했듯이 body와 html 모두 overflow-x hidden이 작동했습니다. 여기 작동 예가 있습니다.
**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;
}
저는 이 주제에 대한 답변을 통해 여러 가지 방법을 시도했는데, 주로 효과가 있었지만 overflow-x를 사용하는 경우와 같은 부작용이 있었습니다.body,html사용자가 모바일에서 아래로 스크롤할 때 페이지가 느려지거나 느려질 수 있습니다.
사용하다position: fixed본체 내부의 wrapper/div에도 좋지만 메뉴판이 있고 자바스크립트를 사용하면 애니메이션 스크롤을 클릭하여 일부 섹션으로 이동하면 작동이 되지 않습니다.
저는 를 .touch-action: pan-y pinch-zoom체내의 포장지/디브에.문제는 해결됐습니다.
이것을 해결하는 가장 쉬운 방법, 추가.
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
저는 단지 몇 시간 동안 이것과 다른 페이지들의 다양한 조합을 시도하면서 이것을 연구해 왔습니다.결국 저에게 효과가 있었던 것은 수용된 답변에서 제시된 것처럼 사이트 래퍼 디브를 만드는 것이었지만, 두 오버플로 모두 x 오버플로 대신 숨겨진 오버플로로 설정하는 것이었습니다.스크롤할 때 overflow-y를 그대로 두면 몇 픽셀씩만 세로로 스크롤한 후 중지하는 페이지가 나타납니다.
#all-wrapper {
overflow: hidden;
}
본문이나 html 요소에 아무것도 설정하지 않고 이 정도면 충분했습니다.
유연한 포지셔닝 탑이 있는 모바일 기기에 적합하게 작동하는 솔루션:
html,body {
width: 100%;
margin: 0;
padding: 0;
}
웹 페이지에서 다음을(를)
<meta name="viewport" content="width=device-width, user-scalable=0">
이 CSS를 다른 웹 페이지 메인 디브에 배치하는 것을 잊지 마십시오.
height : auto !important;
오버플로-x를 '숨김'이 아닌 '클립'으로 설정하면 wacom-pen, 시프트 스크롤 휠 또는 기타 프로그램식 스크롤이 있는 터치 장치에서 원하지 않는 스크롤을 방지할 수도 있습니다.단점으로는 자바스크립트로 프로그래밍 방식의 스크롤을 방지할 수도 있습니다.
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#clip
부트스트랩 모드(양식 포함)에 대한 이 문제를 해결할 수 있는 유일한 방법은 다음 코드를 CSS에 추가하는 것이었습니다.
.modal {
-webkit-overflow-scrolling: auto!important;
}
1단계: 뷰포트에서 나가는 요소에 고정되도록 위치를 설정합니다.제 경우에는 다음과 같습니다.
.nav-links {
position:fixed;
right:0px;
background-color:rgba(0,0,0, 0.8);
height:85vh;
top:8vh;
display:flex;
flex-direction:column;
align-items: center;
width:40%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
2단계: 본문과 html에 cs 속성을 추가합니다.
body, html{
overflow-x: hidden;
}
포장지를 넣지 않았습니다.저는 이 두 단계만 가능했습니다.제가 진행하고 있는 프로젝트는 각진 프로젝트입니다.
다음 작품들
body,
.innerbodywrapper{
overflow-x: hidden;
position: fixed;
width: 100%;
height: 100vh;
}
html, body{ overflow-x: hidden; position: relative; }오버플로 숨김 기능을 추가한 상태에서 이렇게 시도해 보십시오.
언급URL : https://stackoverflow.com/questions/14270084/overflow-xhidden-doesnt-prevent-content-from-overflowing-in-mobile-browsers
'programing' 카테고리의 다른 글
| 문자열에 C#의 문자만 포함되어 있는지 확인 (0) | 2023.09.14 |
|---|---|
| 안드로이드에서 푸시 알림 기술은 어떻게 작동합니까? (0) | 2023.09.14 |
| ASP를 사용하여 브라우저에 PDF를 반환합니다.NET 코어 (0) | 2023.09.14 |
| 워드 프레스 - 사용자 지정 게시물 유형에서 하위 메뉴 제거 (0) | 2023.09.14 |
| 구글 크롬으로 커스텀 URL 스킴을 오픈할 수 있습니까? (0) | 2023.09.14 |