モバイル側スクロールスルーの問題解決策

に質問

移動端fixedマスクバックグラウンドとポップアップレイヤがある場合、画面上で背景の下の内容をスライドさせることができます.

シナリオ1

まず私たちは

//     
$("html,body").css({"overlow":"hidden"});
//     
$("html,body").css({"overlow":"auto"});

PC端では機能しているが,移動端ではまだだめで,マスクの下を転がすことができることが分かった.overflowは移動端で無効です.

シナリオ2

     touchmove     preventDefault

ポップアップレイヤ自体にスクロールバーがあると、ポップアップレイヤがスクロールできなくなります.ポップアップレイヤ自体がスクロールする必要がない場合に適用されます(バー).

シナリオ3

ポップアップ・レイヤ自体をスクロールする必要がある場合、2つのツール・メソッドがあります.

//     
fixedBody:function(){
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    document.body.style.cssText += 'position:fixed;top:-'+scrollTop+'px;';
},
//     
looseBody:function() {
    var body = document.body;
    body.style.position = '';
    var top = body.style.top;
    document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top);
    body.style.top = '';
}

ポップアップレイヤが表示される前に、現在のスクロール位置を記録し、bodyをドキュメントストリームから離れ、ドキュメントストリームから離れたbodyを引き上げる.フレームレイヤを閉じると、bodyをドキュメントストリームに戻し、古い場所に戻ります.