ホームページ > ウェブフロントエンド > CSSチュートリアル > モバイル端末のポップアップボックスの背景スライドを無効にする実装方法の紹介(コード付き)

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

不言
リリース: 2018-10-27 14:45:12
転載
2855 人が閲覧しました

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

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

次のメソッドは 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 {

     /* 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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:segmentfault.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート