モバイル端末のポップアップボックスの背景スライドを無効にする実装方法の紹介（コード付き）

この記事ではモバイル端末のポップアップボックスの背景スライドを禁止する実装方法を紹介します（コード付き）ので、困っている方は参考にしていただければと思います。あなたのお役に立てますように。

フェンネルという単語の書き方はたくさんありますが、最も適切なものを見つけるのが最善です。

次のメソッドは 1 つのスタック内で実行可能です。

body;html Set overflow:hidden

.overflow-hidden{
    height: 100%;
    overflow: hidden;
}

// 弹出时
$('html, body,.page').addClass('overflow-hidden');

// 隐藏时
$('html, body,.page').removeClass('overflow-hidden');

問題

本文の内容が 1 つのスタックを超えると、フレームがバウンスします。背景ページは自動的に一番上までスクロールし、ポップアップ フレームの元の位置に戻ることはできません。

scrollTop を保存し、scrollTo

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()を呼び出します

function preventDefaultFn(event){
    event.preventDefault();
}

// 弹出时 遮罩层
$('.modal-overlay').on('touchmove', preventDefaultFn);

// 隐藏时 遮罩层
$('.modal-overlay').off('touchmove', preventDefaultFn);

問題

ポップアップにスクロール コンテンツがあります

解決策

ポップアップボックス内のスクロールが必要な要素にマークを追加し、event.preventDefault() を実行するかどうかを決定します。 );

position:absolute(推奨)# をメイン要素に追加します ##

.page {
     /* main绝对定位，进行内部滚动 */
    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 サイトの他の関連記事を参照してください。