overflow : hidden이 iPhone Safari에서 작동하도록 적용됩니까?
iPhone Safari overflow:hidden에서 <body>작동 합니까 ? 그렇지 않은 것 같습니다. 나는 그것을 달성하기 위해 전체 웹 사이트에 래퍼를 만들 수 없습니다 ...
당신은 해결책을 알고 있습니까?
예 : 긴 페이지가 있고 단순히 "폴드"아래에있는 컨텐츠를 숨기고 싶다면 iPhone / iPad에서 작동해야합니다.
나는 비슷한 문제가 있었다 및 적용 것을 발견 overflow: hidden;모두 html와 body내 문제를 해결했다.
html,
body {
overflow: hidden;
}
iOS 9의 경우 대신 이것을 사용해야 할 수도 있습니다 .
html,
body {
overflow: hidden;
position: relative;
height: 100%;
}
body {
position:relative; // that's it
overflow:hidden;
}
여기에 나열된 일부 솔루션에는 탄성 스크롤을 늘릴 때 이상한 결함이있었습니다. 내가 사용한 것을 고치려면 :
body.lock-position {
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}
출처 : http://www.teamtownend.com/2013/07/ios-prevent-scrolling-on-body/
오늘 iOS 8 & 9 에서이 문제가 있었으며 이제 높이를 추가해야합니다 .100 %;
그래서 추가
html,
body {
position: relative;
height: 100%;
overflow: hidden;
}
여기에 대한 답변과 의견과 여기에 비슷한 질문을 결합하면 나에게 도움이되었습니다.
전체 답변으로 게시하십시오.
<body>태그 내에서 사이트 콘텐츠 주위에 래퍼 div를 배치하는 방법은 다음과 같습니다 .
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- other meta and head stuff here -->
<head>
<body>
<div class="wrapper">
<!-- Your site content here -->
</div>
</body>
</html>
아래와 같이 랩퍼 클래스를 작성하십시오.
.wrapper{
position:relative; //that's it
overflow:hidden;
}
나는 또한 이 대답에서 아이디어를 얻었습니다 .
그리고이 대답은 또한 생각할만한 음식을 얻었습니다. 아마도 데스크탑과 장치 모두에서 똑같이 잘 작동 할 것입니다.
나를 위해 :
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
충분하지 않아서 Safari의 iOS에서 작동하지 않았습니다. 또한 추가해야했습니다.
top: 0;
left: 0;
right: 0;
bottom: 0;
잘 작동하도록 잘 작동합니다 :)
Safari 브라우저에서 작동합니다.
html,
body {
overflow: hidden;
position: fixed
}
Why not wrap the content you don't want shown in an element with a class and set that class to display:none in a stylesheet meant only for the iphone and other handheld devices?
<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">
<!--<![endif]-->
html {
position:relative;
top:0px;
left:0px;
overflow:auto;
height:auto
}
add this as default to your css
.class-on-html{
position:fixed;
top:0px;
left:0px;
overflow:hidden;
height:100%;
}
toggleClass this class to to cut page
when you turn off this class first line will call scrolling bar back
I've worked with <body>and <div class="wrapper">
When popup opens ...
<body> gets a height of 100% and an overflow:hidden
<div class="wrapper"> gets position:relative;overflow:hidden;height:100%;
I use JS/jQuery to get the actual scrollposition of the page and store the value as data-attribut to body
Then i scroll to the scrollposition in the .wrapper DIV (not in window)
Here is my solution:
JS/jQuery:
// when popup opens
$('body').attr( 'data-pos', $(window).scrollTop()); // get actual scrollpos
$('body').addClass('locked'); // add class to body
$('.wrapper').scrollTop( $('body').attr( 'data-pos' ) ); // let wrapper scroll to scrollpos
// when popup close
$("body").removeClass('locked');
$( window ).scrollTop( $('body').attr( 'data-pos' ));
CSS:
body.locked {position:relative;overflow:hidden;height:100%;}
body.locked .wrapper {position:relative;overflow:hidden;height:100%;}
It works well on both sides ... desktop & mobile (iOS).
Tipps and improvements are welcome :)
Cheers!
Yes, this is related to new updates in safari that are breaking your layout now if you use overflow: hidden to take care of clearing divs.
It does apply, but it only applies to certain elements within the DOM. for example, it won't work on a table, td, or some other elements, but it will work on a <DIV> tag.
eg:
<body>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
Only tested in iOS 4.3.
A minor edit: you may be better off using overflow:scroll so two finger-scrolling does work.
Here is what I did: I check the body y position , then make the body fixed and adjust the top to the negative of that position. On reverse, I make the body static and set the scroll to the value I recorded before.
var body_x_position = 0;
function disable_bk_scrl(){
var elb = document.querySelector('body');
body_x_position = elb.scrollTop;
// get scroll position in px
var body_x_position_m = body_x_position*(-1);
console.log(body_x_position);
document.body.style.position = "fixed";
$('body').css({ top: body_x_position_m });
}
function enable_bk_scrl(){
document.body.style.position = "static";
document.body.scrollTo(0, body_x_position);
console.log(body_x_position);
}
Simply change body height < 300px (height of mobile viewport on landspace is around 300px to 500px)
JS
$( '.offcanvas-toggle' ).on( 'click', function() {
$( 'body' ).toggleClass( 'offcanvas-expanded' );
});
CSS
.offcanvas-expended { /* this is class added to body on click */
height: 200px;
}
.offcanvas {
height: 100%;
}
'Programming' 카테고리의 다른 글
| 데이터베이스 구조 변경을위한 버전 관리 시스템이 있습니까? (0) | 2020.07.15 |
|---|---|
| Sass 및 결합 된 자식 선택기 (0) | 2020.07.15 |
| 하나의 MongoDB 문서의 _id를 어떻게 업데이트합니까? (0) | 2020.07.15 |
| “wc -l”을 사용하여 파일 이름없이 줄 수만 인쇄하는 방법은 무엇입니까? (0) | 2020.07.15 |
| UI 라우터를 사용하여 객체를 상태로 전달하는 방법은 무엇입니까? (0) | 2020.07.15 |