iPhone Safari에서 작업할 때 오버플로: 숨김이 적용됩니까?
한다overflow:hidden에 적용되는.<body>iPhone Safari에서 작동합니까?아닌 것 같습니다.웹사이트 전체에 포장지를 만들 수는 없습니다.
당신은 그 해결책을 알고 계십니까?
예:페이지가 길기 때문에 단순히 "접기" 아래에 있는 내용을 숨기고 싶으며 iPhone/iPad에서 작동해야 합니다.
저도 비슷한 문제가 있었고 지원하는 것을 발견했습니다.overflow: hidden;양쪽 모두에게html그리고.body내 문제를 해결했습니다.
html,
body {
overflow: hidden;
}
iOS 9의 경우, 대신 이것을 사용해야 할 수도 있습니다: (고마워 chaenu!)
html,
body {
overflow: hidden;
position: relative;
height: 100%;
}
body {
position:relative; // that's it
overflow:hidden;
}
여러 날 동안 노력한 끝에 저는 다음과 같은 솔루션을 발견했습니다.
touch-action: none;
-ms-touch-action: none;
여기에 나열된 일부 솔루션은 탄력적인 스크롤을 확장할 때 이상한 결함이 있었습니다.사용한 내용 수정하기
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;
}
사파리 브라우저에서 작동합니다.
html,
body {
overflow: hidden;
position: fixed
}
나를 위한 것:
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
충분하지 않았습니다, 저는 사파리에서 iOS에서 작업하지 않았습니다.또한 다음을 추가해야 했습니다.
top: 0;
left: 0;
right: 0;
bottom: 0;
잘 되게 하기 위해서요.지금은 잘 작동합니다 :)
여기서의 답변과 의견과 이와 유사한 질문을 결합하는 것이 저에게 효과가 있었습니다.
그래서 전체적인 답변을 게시하는 것.
다음은 당신이 당신의 사이트 콘텐츠 바로 안쪽에 래퍼 디브를 배치하는 방법입니다.<body>꼬리표를 달다
<!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;
}
저도 여기 이 대답에서 아이디어를 얻었습니다.
그리고 이 대답은 또한 생각할 거리를 가지고 있습니다.데스크톱과 장치 모두에서 동일하게 작동할 수 있는 기능입니다.
와 함께 일한 적이 있습니다.<body>그리고.<div class="wrapper">
팝업이 열리면...
<body>100%의 높이와 오버플로를 가져옵니다.숨김
<div class="wrapper">위치를 가져옵니다; 위치:숨김; 높이:100%;
JS/jQuery를 사용하여 페이지의 실제 스크롤 위치를 가져오고 값을 본문에 데이터 속성으로 저장합니다.
그런 다음 .wrapper DIV(창이 아님)의 스크롤 위치로 스크롤합니다.
제 솔루션은 다음과 같습니다.
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%;}
데스크톱과 모바일(iOS) 모두에서 잘 작동합니다.
팁과 개선은 환영합니다 :)
건배!
html {
position:relative;
top:0px;
left:0px;
overflow:auto;
height:auto
}
이것을 기본값으로 당신의 css에 추가합니다.
.class-on-html{
position:fixed;
top:0px;
left:0px;
overflow:hidden;
height:100%;
}
toggle 페이지를 자를 클래스로 분류
이 클래스를 끄면 첫 번째 줄이 스크롤 막대를 다시 호출합니다.
예, 이것은 사파리의 새로운 업데이트와 관련이 있습니다. 만약 당신이 오버플로를 사용한다면, 당신의 레이아웃이 깨질 것입니다: div를 지우기 위해 숨김.
예를 또는 <합니다.예를 들어 테이블, td 또는 기타 요소에서는 작동하지 않지만 <DIV> 태그에서는 작동합니다.
선택:
<body>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
iOS 4.3에서만 테스트되었습니다.
간단한 편집: 두 개의 손가락 스크롤이 작동하도록 overflow:scroll을 사용하는 것이 좋습니다.
그를 요에표시지않을내클래용해래핑로당까클고다니어것으로 설정하는 것은 요?display:none아이폰과 기타 휴대용 기기만을 위한 스타일시트에서?
<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">
<!--<![endif]-->
제가 한 일은 다음과 같습니다.저는 바디의 위치를 확인한 후 바디를 고정시키고 상의를 그 위치의 네거티브로 조정합니다.반대로 차체를 정적으로 만들고 스크롤을 이전에 기록한 값으로 설정합니다.
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);
}
웹 페이지에 CSS가 없는 것처럼 UA 스타일시트에서 브라우저가 지정한 기본값으로 속성 값을 재설정하는 CSS 키워드 값입니다.를 들면, 들면를예,display:revert에서.<div>으로 결적으로가 될 입니다.display:block.
overflow: revert;
이게 제대로 작동할 것 같습니다.
스크롤 모달이 필요한 경우
모달 열림
$('body').attr('data-position', $(window).scrollTop());
$('body').css({'overflow' : 'hidden', 'position' : 'fixed'});
모달 닫기
$('body').css({'overflow' : 'unset', 'position' : 'unset'});
$(window).scrollTop( $('body').attr( 'data-position' ));
My version) iOS에서 작업
if (isModalWindowClose) {
document.querySelector('body').style.overflow = '';
document.querySelector('html').style.overflow = '';
const scrollY = document.body.style.top;
document.querySelector('html').style.height = '';
document.body.style.position = '';
document.body.style.left = '';
document.body.style.top = '';
window.scrollTo(0, parseInt(scrollY || '0') * -1);
document.querySelector('html').style['scroll-behavior'] = '';
} else {
document.body.style.top = `-${window.scrollY}px`;
document.querySelector('html').style.height = `${window.innerHeight - 1}px`;
document.body.style.position = 'fixed';
document.body.style.left = '0';
document.querySelector('body').style.overflow = 'hidden';
document.querySelector('html').style.overflow = 'hidden';
document.querySelector('html').style['scroll-behavior'] = 'unset';
}차체 높이를 300px 미만으로 변경하기만 하면 됩니다(육지 공간의 모바일 뷰포트 높이는 약 300px~500px).
제이에스
$( '.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%;
}
언급URL : https://stackoverflow.com/questions/3047337/does-overflowhidden-applied-to-body-work-on-iphone-safari
'UFO ET IT' 카테고리의 다른 글
| Android에서 startActivityForResult를 관리하는 방법 (0) | 2023.06.02 |
|---|---|
| jQuery에서 확인란 값 가져오기 (0) | 2023.06.02 |
| CSS 디스플레이: 인라인 vs 인라인 블록 (0) | 2023.06.02 |
| UITextField - capture return 버튼 이벤트 (0) | 2023.06.02 |
| 전복 상태 기호 "~"는 무엇을 의미합니까? (0) | 2023.06.02 |