Il suffit de désactiver le défilement pour ne pas le cacher?

Question

Je suis en train de désactiver le html/body barre de défilement de la mère alors que je suis en utilisant une lightbox. Le principal mot ici est de désactiver je ne veux pas le cacher avec overflow: hidden;.

la raison pour cela est qu' overflow: hidden rend le site de sauter et de prendre jusqu'à la zone où le manuscrit a été.

MODIFIER
Je veux juste savoir si c'est possible de désactiver une barre de défilement en la montrant.

SOLUTION
J'ai ajouter cette classe

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

Et l'ajouter au corps seulement, quand j'ouvre la visionneuse, et l'enlever quand j'ai fermer la lightbox

$('body').addClass('noscroll');
$('body').removeClass('noscroll');

cela fonctionne pour moi, et j'utilise le fancyapp.

merci à Fabrizio Calderan

Answer 1

c'est un peu hacky (de sorte qu'il peut ne pas être approprié pour votre application), mais si la page, sous la surcouche peut être "fixe" au sommet, lorsque vous ouvrez la superposition vous pouvez définir

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

vous devriez toujours voir le droit de la barre de défilement, mais le contenu n'est pas déplacé. Lorsque vous fermez la superposition revenir à ces propriétés avec

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

J'ai juste proposé de cette façon seulement parce que vous n'avez pas besoin de changer tout événement scroll

Mise à jour

Vous pouvez également faire une légère amélioration: si vous obtenez l' document.documentElement.scrollTop de la propriété via le javascript juste avant d'ouvrir le calque, vous pouvez attribuer dynamiquement cette valeur en top de la propriété de l'élément de corps :) De cette manière, la page restera à sa place, peu importe si vous êtes en haut ou en bas.

Si votre code pourrait devenir

Css

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

JS

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

Answer 2

Quatre petits ajouts à la solution choisie:

1. Appliquer 'noscroll" pour html au lieu du corps pour empêcher la double barres de défilement dans IE
2. Pour vérifier s'il y a effectivement une barre de défilement avant d'ajouter le 'noscroll' classe. Sinon, le site permettra également de passer poussé par la nouvelle de la non-défilement de la barre de défilement.
3. Pour garder toute possible scrollTop de sorte que la totalité de la page n'est pas un retour vers le haut (comme Fabrizio de la mise à jour, mais vous devez saisir la valeur avant l'ajout d'un "noscroll' classe)
4. Pas tous les navigateurs gérer scrollTop de la même manière comme documenté 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 à Fabrice et Dejan pour me mettre sur la bonne voie et à Brodingo pour la solution de la double barre de défilement

Answer 3

C'est la solution, nous sommes allés avec des. Il vous suffit d'enregistrer la position de défilement lorsque le recouvrement est ouvert, revenir à la position sauvegardée tout moment, l'utilisateur a tenté de faire défiler la page, et la tour de l'auditeur à l'arrêt lorsque le recouvrement est fermé.

Il 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>

Answer 4

vous pouvez garder le débordement: masqué mais gérer la position du défilement manuellement:

avant d'afficher garder trace de la position actuelle 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

Answer 5

La méthode la plus simple mais la plus efficace consiste à forcer le défilement vers le haut, désactivant ainsi le défilement:

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

Lorsque vous ouvrez la visionneuse, relevez le drapeau et, pour le fermer, abaissez-le.

Cas de test en direct .