ポップアップ ウィンドウの下での下部ページのスライドを無効にする

今回は、ポップアップウィンドウ下での下部ページのスライドを禁止するための注意事項をご紹介します。実際のケースを見てみましょう。

プロジェクトの開発プロセス中、特にモバイル端末では、ポップアップ ウィンドウを含むページに遭遇することがよくあります。特別な要件がなければ、ポップアップ ウィンドウが表示された後も、ポップアップ ウィンドウの下の一番下のページをスライドさせることができます。より良いユーザー エクスペリエンスを実現するには、ポップアップ ウィンドウが閉じられたときに、ポップアップ ウィンドウの下部にあるページがスライドしないようにする必要があります。ポップアップ ウィンドウのスライドが再開されます。 具体的なアイデアは次のとおりです。

1. ポップアップ ウィンドウがトリガーされると、バーの位置がスクロールされます。

2. 下部ページのposition属性を固定に設定します。

3. ポップアップウィンドウがトリガーされたときの下部ページの位置を初期位置に設定します。

4. ポップアップウィンドウを閉じると、一番下のページの位置属性が復元されます。

5. 下部ページのスクロールバーの高さを元に戻します。

//触发弹窗底部页面禁止滑动
function fixed(){
  var scrollTop = document.body.scrollTop;//设置背景元素的位置
  $('#content').attr('data-top',scrollTop);
  var contentStyle = document.getElementById("content").style;//content是可以滚动的背景元素id名称
  contentStyle.position = 'fixed'; //contentStyle是第二步的变量，设置背景元素的position属性为‘fixed'
  contentStyle.top = "-"+scrollTop+"px";
}
//关闭弹窗底部页面恢复滑动
function fixed_cancel(){
  var contentStyle = document.getElementById("content").style;
  var scrollTop = $('#content').attr('data-top');//设置背景元素的位置
  contentStyle.top = '0px';//恢复背景元素的初始位置
  contentStyle.position ="static";//恢复背景元素的position属性（初始值为absolute，就恢复为absolute，以此类推）
  $(document).scrollTop(scrollTop);//scrollTop,设置滚动条的位置
}

ポップアップ ウィンドウがトリガーされたときに fix() メソッドを実行し、ポップアップ ウィンドウが閉じられたときに fix_cancel() メソッドをトリガーすると、ユーザー エクスペリエンスが向上します。

この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

ジャクソンがJSON文字列を解析するときに大文字と小文字を自動的に変換する方法

jQuery+localStorageを使用してタイマーを実装する

以上がポップアップ ウィンドウの下での下部ページのスライドを無効にするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。