답변:
나는 비슷한 문제가 있었다 및 적용 것을 발견 overflow: hidden;모두 html와 body내 문제를 해결했다.
html,
body {
overflow: hidden;
} iOS 9의 경우 대신 이것을 사용해야 할 수도 있습니다 .
html,
body {
overflow: hidden;
position: relative;
height: 100%;
}position: relative합니다.
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/
position: relative하지만 ( 내 경우에는보다 효과적입니다 ), 기본 스타일을 복원 한 후 스크롤 위치가 손실됩니다 (예 : 메뉴 닫기).
// on menu open // save window pos $('body').attr( 'data-pos', $(window).scrollTop() ) ; // ... // on menu close // scroll to saved window pos $( window ).scrollTop( $('body').attr( 'data-pos' ) );
여기에 답변과 의견을 결합하고 여기에 비슷한 질문이 있습니다. 나에게 도움이되었습니다.
전체 답변으로 게시하십시오.
<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;
}나는 또한 이 대답에서 아이디어를 얻었습니다 .
그리고이 대답은 또한 생각할만한 음식을 얻었습니다. 아마도 데스크톱과 장치 모두에서 똑같이 잘 작동 할 것입니다.
내가 함께 일했다 <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) 양쪽에서 잘 작동합니다.
팁과 개선은 환영합니다 :)
건배!
여기 내가 한 일이 있습니다. 몸체 y 위치를 확인한 다음 몸을 고정시키고 상단을 해당 위치의 음수로 조정하십시오. 반대로 본문을 정적으로 만들고 스크롤을 이전에 기록한 값으로 설정합니다.
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);
}본체 높이를 300 픽셀 미만으로 변경하기 만하면됩니다.
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%;
}