web-dev-qa-db-fra.com

Désactiver le défilement lorsque la fenêtre contextuelle est active

J'ai créé un popup jQuery en suivant un tutoriel en ligne ( http://uposonghar.com/popup.html ).

En raison de ma faible connaissance de jQuery, je ne suis pas en mesure de le faire fonctionner selon mes besoins.

Mon problème:

  1. Je veux désactiver le défilement de la page Web lorsque la fenêtre contextuelle est active. 
  2. La couleur de fondu de l'arrière-plan de la fenêtre contextuelle tant qu'elle est active ne fonctionne pas sur la totalité de la page 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>
javascriptjqueryhtmlcss
14
arifix

Une réponse simple, que vous pourriez utiliser et ne nécessiterait pas d'arrêter l'événement de défilement, serait de régler la position de votre #ac-wrapper.

par exemple.

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

le conteneur de la fenêtre contextuelle sera toujours visible (aligné en haut à gauche) tout en permettant le défilement.

Mais faire défiler la page avec un popup ouvert est mauvais !!! (presque toujours quand même)

La raison pour laquelle vous ne souhaitez pas autoriser le défilement, c’est que, si votre popup n’est pas plein écran ou est semi-transparent, les utilisateurs verront le contenu défiler derrière le popup. En plus de cela, quand ils fermeront le popup, ils seront maintenant dans une position différente sur la page.

Une solution consiste, lorsque vous liez un événement click en javascript à afficher cette fenêtre contextuelle, à ajouter également une classe au corps avec essentiellement ces règles:

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

Ensuite, lorsque vous fermez la fenêtre contextuelle en déclenchant une action ou en la supprimant d'un clic, vous supprimez simplement la classe à nouveau, ce qui vous permet de faire défiler après la fermeture de la fenêtre contextuelle.

Si l'utilisateur fait défiler alors que la popup est ouverte, le document ne défilera pas. Lorsque l'utilisateur ferme la fenêtre contextuelle, le défilement redevient disponible et l'utilisateur peut continuer là où il s'est arrêté :)

12
SidOfc

Pour désactiver la barre de défilement:

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

Cela cachera la barre de défilement

Fond-fondu-chose:

J'ai créé mon propre widget popup-dialog-dialog qui a aussi un arrière-plan. J'ai utilisé le CSS suivant:

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 */
}
14
Kenji Elzerman

J'avais un problème similaire; vouloir désactiver le défilement vertical alors qu'un div "popup" était affiché.

La modification de la propriété de débordement de la variable body fonctionne, mais modifie également la largeur du document.

J'ai choisi jquery pour résoudre ce problème en utilisant un espace réservé pour la barre de défilement . Cela a été fait sans se lier à l'événement scroll, car cela ne change pas la position de la barre de défilement ni ne scintille :)

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;
}

Jquery:

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');
    });
}

J'espère que cela t'aides.

4
BDR

Utilisez le code ci-dessous pour désactiver et activer la barre de défilement.

 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();
2
Rakesh Chaudhari

https://jsfiddle.net/satishdodia/L9vfhdwq/1/
html: - Ouvrir popup

Popup

pop open scroll scroll now ... quand je clique sur fermer automatiquement défiler en cours d'exécution.

**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>
0
Satish Dodia

J'ai eu le même problème et j'ai trouvé un moyen de s'en débarrasser, il vous suffit d'arrêter la propagation au toucher sur votre élément qui apparaît. Pour moi, c’était le menu plein écran qui apparaissait à l’écran et vous ne pouviez pas faire défiler, maintenant vous le pouvez.

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

Si le simple basculement du 'débordement-y' du corps rompt la position de défilement de votre page, essayez d'utiliser les 2 fonctions suivantes (jQuery):

// Run this function when you open your popup:
var disableBodyScroll = function(){
    window.body_scroll_pos = $(window).scrollTop(); // write page scroll position in a global variable
    $('body').css('overflow-y','hidden');
}

// Run this function when you close your popup:
var enableBodyScroll = function(){
    $('body').css('overflow-y','scroll');
    $(window).scrollTop(window.body_scroll_pos); // restore page scroll position from the global variable
}
0
Dmitry Kulahin