この記事ではモバイル端末のポップアップボックスの背景スライドを禁止する実装方法を紹介します(コード付き)ので、困っている方は参考にしていただければと思います。あなたのお役に立てますように。
フェンネルという単語の書き方はたくさんありますが、最も適切なものを見つけるのが最善です。
次のメソッドは 1 つのスタック内で実行可能です。
body;html Set overflow:hidden
1 2 3 4 5 6 7 8 9 10 | .overflow-hidden{
height: 100%;
overflow: hidden;
}
$( 'html, body,.page' ).addClass( 'overflow-hidden' );
$( 'html, body,.page' ).removeClass( 'overflow-hidden' );
|
ログイン後にコピー
問題
本文の内容が 1 つのスタックを超えると、フレームがバウンスします。背景ページは自動的に一番上までスクロールし、ポップアップ フレームの元の位置に戻ることはできません。
scrollTop を保存し、scrollTo
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | var top = $(window).scrollTop();
$( "body .page" ).css({
"position" : "fixed" ,
"top" : -top,
"left" : 0,
"right" : 0,
"bottom" : 0
}),
$( "body .page" ).css({
"position" : "static"
});
$( "html" ).css({
"scroll-behavior" : "unset"
});
$(window).scrollTop(top),
$( "html" ).css({
"scroll-behavior" : "smooth"
});
|
ログイン後にコピー
問題
を設定します。
本文のコンテンツが 1 ページを超えると、ポップアップの背景ページが自動的に一番上までスクロールし、ポップアップ ボックスの元の位置に戻ることはできません。
ページが一番上になり、ページがスクロールします。ページがちらつきます
touchmove イベントをバインドして、preventDefault()を呼び出します
1 2 3 4 5 6 7 8 9 | function preventDefaultFn(event){
event.preventDefault();
}
$( '.modal-overlay' ).on( 'touchmove' , preventDefaultFn);
$( '.modal-overlay' ).off( 'touchmove' , preventDefaultFn);
|
ログイン後にコピー
問題
ポップアップにスクロール コンテンツがあります
解決策
ポップアップボックス内のスクロールが必要な要素にマークを追加し、event.preventDefault() を実行するかどうかを決定します。 );
position:absolute(推奨)# をメイン要素に追加します ##
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .page {
position: absolute;
top: 0;
bottom: 0;
right:0;
left:0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.overflow-hidden{
overflow: hidden;
}
$( '.page' ).addClass( 'overflow-hidden' );
$( '.page' ).removeClass( 'overflow-hidden' );
<div class = "page" >
<!-- 内容在这里... -->
</div>
|
ログイン後にコピー
利点
上記の問題はありません
iOS に関するバグの修正が含まれています
欠点
ページ構造を少し変更する必要があります
css コードも少し変更する必要があります
以上がモバイル端末のポップアップボックスの背景スライドを無効にする実装方法の紹介(コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。