J'essaie de désactiver la barre de défilement html / body du parent pendant que j'utilise une lightbox. Le mot principal ici est désactiver . Je ne pas envie de le cacher avec overflow: hidden;.

La raison en est que overflow: hiddenle site saute et occupe la zone où se trouvait le parchemin.

Je veux savoir s'il est possible de désactiver une barre de défilement tout en l'affichant.

Si la page sous la superposition peut être "fixée" en haut, lorsque vous ouvrez la superposition, vous pouvez définir

body { position: fixed; overflow-y:scroll }

vous devriez toujours voir la barre de défilement de droite, mais le contenu ne peut pas défiler. Lorsque vous fermez la superposition, rétablissez simplement ces propriétés avec

body { position: static; overflow-y:auto }

Je viens de proposer cette méthode uniquement parce que vous n'auriez pas besoin de modifier un événement de défilement

Mettre à jour

Vous pouvez également faire une légère amélioration: si vous obtenez la document.documentElement.scrollToppropriété via javascript juste avant l'ouverture du calque, vous pouvez affecter dynamiquement cette valeur en tant que toppropriété de l'élément body: avec cette approche, la page restera à sa place, peu importe si vous '' re en haut ou si vous avez déjà fait défiler.

Css

.noscroll { position: fixed; overflow-y:scroll }

JS

$('body').css('top', -(document.documentElement.scrollTop) + 'px')
         .addClass('noscroll');

Quatre petits ajouts à la solution sélectionnée:

1. Appliquer «noscroll» au html au lieu du corps pour éviter les doubles barres de défilement dans IE
2. Pour vérifier s'il existe réellement une barre de défilement avant d'ajouter la classe «noscroll». Sinon, le site sautera également poussé par la nouvelle barre de défilement sans défilement.
3. Pour conserver tout scrollTop possible afin que la page entière ne remonte pas en haut (comme la mise à jour de Fabrizio, mais vous devez saisir la valeur avant d'ajouter la classe 'noscroll')
4. Tous les navigateurs ne gèrent pas scrollTop de la même manière que celle décrite sur http://help.dottoro.com/ljnvjiow.php

Solution complète qui semble fonctionner pour la plupart des navigateurs:

CSS

html.noscroll {
    position: fixed; 
    overflow-y: scroll;
    width: 100%;
}

Désactiver le défilement

if ($(document).height() > $(window).height()) {
     var scrollTop = ($('html').scrollTop()) ? $('html').scrollTop() : $('body').scrollTop(); // Works for Chrome, Firefox, IE...
     $('html').addClass('noscroll').css('top',-scrollTop);         
}

Activer le défilement

var scrollTop = parseInt($('html').css('top'));
$('html').removeClass('noscroll');
$('html,body').scrollTop(-scrollTop);

Merci à Fabrizio et Dejan de m'avoir mis sur la bonne voie et à Brodingo pour la solution à la double barre de défilement

Avec jQuery inclus:

désactiver

$.fn.disableScroll = function() {
    window.oldScrollPos = $(window).scrollTop();

    $(window).on('scroll.scrolldisabler',function ( event ) {
       $(window).scrollTop( window.oldScrollPos );
       event.preventDefault();
    });
};

activer

$.fn.enableScroll = function() {
    $(window).off('scroll.scrolldisabler');
};

usage

//disable
$("#selector").disableScroll();
//enable
$("#selector").enableScroll();

Je suis l'OP

Avec l'aide de la réponse de fcalderan, j'ai pu trouver une solution. Je laisse ma solution ici car elle clarifie la façon de l'utiliser et ajoute un détail très crucial,width: 100%;

J'ajoute cette classe

body.noscroll
{
    position: fixed; 
    overflow-y: scroll;
    width: 100%;
}

cela a fonctionné pour moi et j'utilisais Fancyapp.

Cela a très bien fonctionné pour moi ....

// disable scrolling
$('body').bind('mousewheel touchmove', lockScroll);

// enable scrolling
$('body').unbind('mousewheel touchmove', lockScroll);


// lock window scrolling
function lockScroll(e) {
    e.preventDefault();
}

enveloppez simplement ces deux lignes de code avec tout ce qui décide quand vous allez verrouiller le défilement.

par exemple

$('button').on('click', function() {
     $('body').bind('mousewheel touchmove', lockScroll);
});

Vous ne pouvez pas désactiver l'événement de défilement, mais vous pouvez désactiver les actions associées qui mènent à un défilement, comme la molette de la souris et le déplacement tactile:

$('body').on('mousewheel touchmove', function(e) {
      e.preventDefault();
});

Vous pouvez masquer la barre de défilement du corps avec overflow: hiddenet définir une marge en même temps afin que le contenu ne saute pas:

let marginRightPx = 0;
if(window.getComputedStyle) {
    let bodyStyle = window.getComputedStyle(document.body);
    if(bodyStyle) {
        marginRightPx = parseInt(bodyStyle.marginRight, 10);
    }
}

let scrollbarWidthPx = window.innerWidth - document.body.clientWidth;
Object.assign(document.body.style, {
    overflow: 'hidden',
    marginRight: `${marginRightPx + scrollbarWidthPx}px`
});

Et puis vous pouvez ajouter une barre de défilement désactivée à la page pour combler l'écart:

textarea {
  overflow-y: scroll;
  overflow-x: hidden;
  width: 11px;
  outline: none;
  resize: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
}

<textarea></textarea>

J'ai fait exactement cela pour ma propre implémentation de lightbox. Semble bien fonctionner jusqu'à présent.

C'est la solution que nous avons choisie. Enregistrez simplement la position de défilement lorsque la superposition est ouverte, revenez à la position enregistrée chaque fois que l'utilisateur tente de faire défiler la page et désactivez l'écouteur lorsque la superposition est fermée.

C'est un peu nerveux sur IE, mais fonctionne comme un charme sur Firefox / Chrome.

var body = $("body"),
  overlay = $("#overlay"),
  overlayShown = false,
  overlayScrollListener = null,
  overlaySavedScrollTop = 0,
  overlaySavedScrollLeft = 0;

function showOverlay() {
  overlayShown = true;

  // Show overlay
  overlay.addClass("overlay-shown");

  // Save scroll position
  overlaySavedScrollTop = body.scrollTop();
  overlaySavedScrollLeft = body.scrollLeft();

  // Listen for scroll event
  overlayScrollListener = body.scroll(function() {
    // Scroll back to saved position
    body.scrollTop(overlaySavedScrollTop);
    body.scrollLeft(overlaySavedScrollLeft);
  });
}

function hideOverlay() {
  overlayShown = false;

  // Hide overlay
  overlay.removeClass("overlay-shown");

  // Turn scroll listener off
  if (overlayScrollListener) {
    overlayScrollListener.off();
    overlayScrollListener = null;
  }
}

// Click toggles overlay
$(window).click(function() {
  if (!overlayShown) {
    showOverlay();
  } else {
    hideOverlay();
  }
});

/* Required */
html, body { margin: 0; padding: 0; height: 100%; background: #fff; }
html { overflow: hidden; }
body { overflow-y: scroll; }

/* Just for looks */
.spacer { height: 300%; background: orange; background: linear-gradient(#ff0, #f0f); }
.overlay { position: fixed; top: 20px; bottom: 20px; left: 20px; right: 20px; z-index: -1; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, .3); overflow: auto; }
.overlay .spacer { background: linear-gradient(#88f, #0ff); }
.overlay-shown { z-index: 1; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1>Top of page</h1>
<p>Click to toggle overlay. (This is only scrollable when overlay is <em>not</em> open.)</p>
<div class="spacer"></div>
<h1>Bottom of page</h1>
<div id="overlay" class="overlay">
  <h1>Top of overlay</h1>
  <p>Click to toggle overlay. (Containing page is no longer scrollable, but this is.)</p>
  <div class="spacer"></div>
  <h1>Bottom of overlay</h1>
</div>

J'ai eu un problème similaire: un menu de gauche qui, lorsqu'il apparaît, empêche le défilement. Dès que la hauteur a été fixée à 100vh, la barre de défilement a disparu et le contenu a basculé vers la droite.

Donc, si cela ne vous dérange pas de garder la barre de défilement activée (mais de régler la fenêtre sur toute sa hauteur pour qu'elle ne défile pas n'importe où), une autre possibilité consiste à définir une petite marge inférieure, qui gardera les barres de défilement montrant:

body {
    height: 100vh;
    overflow: hidden;
    margin: 0 0 1px;
}

vous pouvez garder le débordement: caché mais gérer la position de défilement manuellement:

avant d'afficher la trace de la position réelle du défilement:

var scroll = [$(document).scrollTop(),$(document).scrollLeft()];
//show your lightbox and then reapply scroll position
$(document).scrollTop(scroll[0]).scrollLeft(scroll[1]);

ça devrait marcher

Le moyen grossier mais fonctionnel sera de forcer le défilement vers le haut, désactivant ainsi efficacement le défilement:

var _stopScroll = false;
window.onload = function(event) {
    document.onscroll = function(ev) {
        if (_stopScroll) {
            document.body.scrollTop = "0px";
        }
    }
};

Lorsque vous ouvrez la lightbox, soulevez le drapeau et lorsque vous le fermez, abaissez le drapeau.

Cas de test en direct .

J'aime m'en tenir à la méthode "overflow: hidden" et simplement ajouter un padding-right égal à la largeur de la barre de défilement.

Obtenez la fonction de largeur de la barre de défilement, par lostsource .

function getScrollbarWidth() {
    var outer = document.createElement("div");
    outer.style.visibility = "hidden";
    outer.style.width = "100px";
    outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps

    document.body.appendChild(outer);

    var widthNoScroll = outer.offsetWidth;
    // force scrollbars
    outer.style.overflow = "scroll";

    // add innerdiv
    var inner = document.createElement("div");
    inner.style.width = "100%";
    outer.appendChild(inner);        

    var widthWithScroll = inner.offsetWidth;

    // remove divs
    outer.parentNode.removeChild(outer);

    return widthNoScroll - widthWithScroll;
}

Lors de l'affichage de la superposition, ajoutez la classe "noscroll" au html et ajoutez padding-right au corps:

$(html).addClass("noscroll");
$(body).css("paddingRight", getScrollbarWidth() + "px");

Lorsque vous vous cachez, supprimez la classe et le rembourrage:

$(html).removeClass("noscroll");
$(body).css("paddingRight", 0);

Le style noscroll est juste ceci:

.noscroll { overflow: hidden; }

Notez que si vous avez des éléments avec position: fixed, vous devez également ajouter le remplissage à ces éléments.

<div id="lightbox">est à l'intérieur de l' <body>élément, donc lorsque vous faites défiler la lightbox, vous faites également défiler le corps. La solution consiste à ne pas étendre l' <body>élément à plus de 100%, à placer le contenu long à l'intérieur d'un autre divélément et à ajouter une barre de défilement si nécessaire à cet divélément avec overflow: auto.

html {
  height: 100%
}
body {
  margin: 0;
  height: 100%
}
#content {
  height: 100%;
  overflow: auto;
}
#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<html>
  <body>
    <div id="content">much content</div>
    <div id="lightbox">lightbox<div>
  </body>
</html>

Maintenant, faire défiler la lightbox (et le bodyaussi) n'a aucun effet, car le corps ne dépasse pas 100% de la hauteur de l'écran.

Tous les systèmes basés sur javascript modal / lightbox utilisent un débordement lors de l'affichage du modal / lightbox, sur la balise html ou la balise body.

Lorsque la lightbox est affichée, le js pousse un débordement caché sur le html ou la balise body. Lorsque la lightbox est masquée, certaines suppriment les autres masquées poussent un débordement automatique sur le html ou la balise body.

Les développeurs qui travaillent sur Mac, ne voient pas le problème de la barre de défilement.

Il suffit de remplacer le caché par un unset pour ne pas voir le contenu glisser sous le modal de la suppression de la barre de défilement.

Lightbox ouvert / montrer:

<html style="overflow: unset;"></html>

Fermer / masquer la visionneuse:

<html style="overflow: auto;"></html>

Si la page sous la superposition peut être "fixée" en haut, lorsque vous ouvrez la superposition, vous pouvez définir

.disableScroll { position: fixed; overflow-y:scroll }

fournissez cette classe au corps défilant, vous devriez toujours voir la barre de défilement droite mais le contenu n'est pas défilable.

Pour conserver la position de la page, faites ceci en jquery

$('body').css('top', - ($(window).scrollTop()) + 'px').addClass('disableScroll');

Lorsque vous fermez la superposition, rétablissez simplement ces propriétés avec

var top = $('body').position().top;
$('body').removeClass('disableScroll').css('top', 0).scrollTop(Math.abs(top));

Je viens de proposer cette méthode uniquement parce que vous n'auriez pas besoin de modifier un événement de défilement

Cela empêchera la fenêtre de sauter vers le haut en enregistrant la position de défilement et en la restaurant en activant le défilement.

CSS

.no-scroll{
  position: fixed; 
  width:100%;
  min-height:100vh;
  top:0;
  left:0;
  overflow-y:scroll!important;
}

JS

var scrollTopPostion = 0;

function scroll_pause(){
  scrollTopPostion = $(window).scrollTop();
  $("body").addClass("no-scroll").css({"top":-1*scrollTopPostion+"px"});
}

function scroll_resume(){
  $("body").removeClass("no-scroll").removeAttr("style");
  $(window).scrollTop(scrollTopPostion);
}

Il ne vous reste plus qu'à appeler les fonctions

$(document).on("click","#DISABLEelementID",function(){
   scroll_pause();
});

$(document).on("click","#ENABLEelementID",function(){
   scroll_resume();
});

Vous pouvez le faire avec Javascript:

// Classic JS
window.onscroll = function(ev) {
  ev.preventDefault();
}

// jQuery
$(window).scroll(function(ev) {
  ev.preventDefault();
}

Et puis désactivez-le lorsque votre lightbox est fermée.

Mais si votre lightbox contient une barre de défilement, vous ne pourrez pas faire défiler pendant qu'elle est ouverte. En effet, windowcontient à la fois bodyet #lightbox. Il faut donc utiliser une architecture comme la suivante:

<body>
  <div id="global"></div>
  <div id="lightbox"></div>
</body>

Et puis appliquez l' onscrollévénement uniquement sur #global.