javascript - ポップアップがアクティブな間はスクロールを無効にする

Question

オンラインチュートリアル ( http://uposonghar.com/popup.html ) に従って jQuery ポップアップを作成しました。

jQuery に関する知識が少ないため、要件どおりに機能させることができません。

私の問題：

ポップアップがアクティブな間、ウェブページのスクロールを無効にしたい。
アクティブなポップアップのバックグラウンドフェードカラーが Web ページ全体で機能しない。

CSS:

body {
    background: #999;
}
#ac-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.6);
    z-index: 1001;
}
#popup{
    width: 555px;
    height: 375px;
    background: #FFFFFF;
    border: 5px solid #000;
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    box-shadow: #64686e 0px 0px 3px 3px;
    -moz-box-shadow: #64686e 0px 0px 3px 3px;
    -webkit-box-shadow: #64686e 0px 0px 3px 3px;
    position: relative;
    top: 150px; left: 375px;
}

JavaScript:

<script type="text/javascript">
function PopUp(){
    document.getElementById('ac-wrapper').style.display="none";
}
</script>

HTML:

<div id="ac-wrapper">
  <div id="popup">
  <center>
    <p>Popup Content Here</p>
    <input type="submit" name="submit" value="Submit" onClick="PopUp()" />
  </center>
  </div>
</div>

<p>Page Content Here</p>

score 18 · Accepted Answer

スクロールバーを無効にするには:

$('body').css('overflow', 'hidden');

これにより、スクロールバーが非表示になります

バックグラウンドフェードシング:

背景もある独自の popup-dialog-widget を作成しました。次のCSSを使用しました。

div.modal{
    position: fixed;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background-color: #000;
    display: none;
    filter: alpha(opacity=25); /* internet explorer */
    -khtml-opacity: 0.25; /* khtml, old safari */
    -moz-opacity: 0.25; /* mozilla, netscape */
    opacity: 0.25; /* fx, safari, opera */
}

score 18 · Accepted Answer

使用でき、スクロールイベントを停止する必要がない簡単な答えは、#ac-wrapper固定の位置を設定することです。

例えば

#ac-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.6);
    z-index: 1001;
}

これにより、ポップアップのコンテナーが常に表示されたままになります (左上に揃えられます) が、スクロールは可能です。

しかし、ポップアップを開いた状態でページをスクロールするのは悪いです!!! （とにかくほとんどいつも）

ただし、スクロールを許可したくない理由は、ポップアップがフルスクリーンでないか、半透明である場合、ポップアップの後ろにコンテンツがスクロールして表示されるためです。それに加えて、ポップアップを閉じると、ページ上の別の位置になります。

解決策は、javascript でイベントをバインドしclickてこのポップアップを表示するときに、基本的に次の規則でクラスをボディに追加することです。

.my-body-noscroll-class {
    overflow: hidden;
}

次に、何らかのアクションをトリガーするか、クリックしてポップアップを閉じてポップアップを閉じるときに、クラスを再度削除するだけで、ポップアップが閉じた後にスクロールできるようになります。

ポップアップが開いている間にユーザーがスクロールすると、ドキュメントはスクロールしません。ユーザーがポップアップを閉じると、スクロールが再び利用可能になり、ユーザーは中断したところから続行できます:)

score 6 · Accepted Answer

同様の問題がありました。「ポップアップ」divが表示されている間、垂直スクロールを無効にしたい。

のオーバーフロープロパティを変更しても機能しますbodyが、ドキュメントの幅も台無しになります。

これを解決するためにjqueryを選択し、スクロールバーのプレースホルダーを使用しました。これはイベントにバインドせずに行われたためscroll、スクロールバーの位置が変更されたり、ちらつきが発生したりすることはありません:)

HTML:

<div id="scrollPlaceHolder"></div>

CSS:

body,html
{
    height:100%; /*otherwise won't work*/
}
#scrollPlaceHolder
{
    height:100%;
    width:0px;
    float:right;
    display: inline;
    top:0;
    right: 0;
    position: fixed;
    background-color: #eee;
    z-index: 100;
}

Jクエリ:

function DisableScrollbar()
{
    // exit if page can't scroll
    if($(document).height() ==  $('body').height()) return;

    var old_width = $(document).width();
    var new_width = old_width;

    // ID's \ class to change
    var items_to_change = "#Banner, #Footer, #Content";

    $('body').css('overflow-y','hidden');

    // get new width
    new_width = $(document).width()

    // update width of items to their old one(one with the scrollbar visible)
    $(items_to_change).width(old_width);

    // make the placeholder the same width the scrollbar was
    $("#ScrollbarPlaceholder").show().width(new_width-old_width);

    // and float the items to the other side.
    $(items_to_change).css("float", "left");

}

function EnableScrollbar()
{
    // exit if page can't scroll
    if ($(document).height() ==  $('body').height()) return;   

    // remove the placeholder, then bring back the scrollbar
    $("#ScrollbarPlaceholder").fadeOut(function(){          
        $('body').css('overflow-y','auto');
    });
}

お役に立てれば。

score 3 · Accepted Answer

以下のコードを使用して、スクロールバーを無効および有効にします。

 Scroll = (
    function(){
          var x,y;
         function hndlr(){
            window.scrollTo(x,y);
            //return;
          }  
          return {

               disable : function(x1,y1){
                    x = x1;
                    y = y1;
                   if(window.addEventListener){
                       window.addEventListener("scroll",hndlr);
                   } 
                   else{
                        window.attachEvent("onscroll", hndlr);
                   }     

               },
               enable: function(){
                      if(window.removeEventListener){
                         window.removeEventListener("scroll",hndlr);
                      }
                      else{
                        window.detachEvent("onscroll", hndlr);
                      }
               } 

          }
    })();
 //for disabled scroll bar.
Scroll.disable(0,document.body.scrollTop);
//for enabled scroll bar.
Scroll.enable();

score 1 · Accepted Answer

https://jsfiddle.net/satishdodia/L9vfhdwq/1/
html:- ポップアップを開く

現れる

pop open scroll stop now... closeをクリックすると、自動的にスクロールが実行されます。

近い

**css:-**    
        #popup{
        position: fixed;
        background: rgba(0,0,0,.8);
        display: none;
        top: 20px;
        left: 50px;
        width: 300px;
        height: 200px;
        border: 1px solid #000;
        border-radius: 5px;
        padding: 5px;
        color: #fff;
    } 
**jquery**:-
       <script type="text/javascript">
        $("#open_popup").click(function(){
        $("#popup").css("display", "block");
        $('body').css('overflow', 'hidden');
      });

      $("#close_popup").click(function(){
        $("#popup").css("display", "none");
        $('body').css('overflow', 'scroll');
      }); 
      </script>

score 0 · Accepted Answer

私は同じ問題を抱えていて、それを取り除く方法を見つけました。ポップアップする要素の touchmove で伝播を停止するだけです。私にとっては、画面に表示されたのはフルスクリーンメニューで、スクロールできませんでしたが、今ではスクロールできます。

$(document).on("touchmove","#menu-left-toggle",function(e){
    e.stopPropagation();
});

score 0 · Accepted Answer

私は問題に遭遇し、いくつかの解決策を試しました。これが私の問題を解決した記事です ( https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/ ) 。単純！

これは、多くの投稿でよく見られる「固定体」ソリューションを使用しています。このソリューションの問題は、ポップアップが閉じられると、本文が一番上にスクロールして戻ることです。ただし、この記事では、ソリューションの使用中に CSS の top 属性と position 属性を操作することで、スクロール位置を回復できると指摘しています。

ソリューションのもう 1 つの問題は、複数のポップアップシナリオでソリューションを適用できないことです。そこで、ポップアップのカウントを格納する変数を追加しました。これは、プログラムが開始プロセスやリセットプロセスを間違ったタイミングでトリガーしないようにするためです。

これが私が得る最終的な解決策です：

// freeze or free the scrolling of the body:

const objectCountRef = { current: 0 }

function freezeBodyScroll () {
  if (objectCountRef.current === 0) {  // trigger the init process when there is no other popup exist
    document.body.style.top = `-${window.scrollY}px`
    document.body.style.position = 'fixed'
  }
  objectCountRef.current += 1
}
function freeBodyScroll () {
  objectCountRef.current -= 1
  if (objectCountRef.current === 0) {  // trigger the reset process when all the popup are closed
    const scrollY = document.body.style.top
    document.body.style.position = ''
    document.body.style.top = ''
    window.scrollTo(0, parseInt(scrollY || '0') * -1)
  }
}

私の Codepen でもデモを見ることができます: https://codepen.io/tabsteveyang/pen/WNpbvyb

編集

「固定体」ソリューションの詳細

このアプローチは、主に body 要素の CSS position 属性を「fixed」に設定して、スクロールできないようにすることです。どれだけスクロールしても、本文が固定されると、一番上にスクロールして戻る、これは私が期待していない動作です。(ユーザーが長いコンテンツをブラウジングしていて、ほとんどページの一番下までスクロールすると想像してください。突然ポップアップが表示され、ページが一番上にスクロールして戻ります。これはユーザーエクスペリエンスが悪いことです)

記事からの解決策

さらに、「固定ボディ」アプローチに基づいて、ソリューションはボディの CSS 上部を「-window.scrollY px」の値として設定し、ボディが固定されている間、現在のスクロール位置にとどまっているように見えます。さらに、このソリューションでは本文の CSS 上部を一時的な参照として使用するため、本文を再度スクロール可能にしたい場合に属性によってスクロール位置を取得できます。(正の位置にするには、位置を -1 に掛ける必要があることに注意してください)

javascript - ポップアップがアクティブな間はスクロールを無効にする

9 に答える 9

現れる

編集

「固定体」ソリューションの詳細

記事からの解決策

Related

Reference