回答:
同様の問題がありoverflow: hidden;、両方に適用して問題htmlをbody解決したことがわかりました。
html,
body {
overflow: hidden;
} iOS 9の場合、代わりにこれを使用する必要がある場合があります：（ありがとうchaenu！）
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' ) );
ここで回答とコメントを結合し、ここで同様の質問を結合しますうまくいきました。
したがって、全体として回答を投稿します。
これは、サイトコンテンツのラッパーdivを<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%;
}このクラスのtoggleClassはページをカットします
このクラスをオフにすると、最初の行はスクロールバーを呼び出します。
はい、これは、overflow：hiddenを使用してdivのクリアを処理する場合に、レイアウトを壊してしまうSafariの新しいアップデートに関連しています。
これが私がしたことです：私はボディの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ピクセル未満に変更するだけです（ランドスペースのモバイルビューポートの高さは約300ピクセルから500ピクセルです）。
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%;
}