Scrolling auf Körper in Overlay-Modalansicht deaktivieren

Question

Ich verwende this script, um eine modale Ansicht anzuzeigen und auszublenden, aber ich möchte das Scrollen auf Körper deaktivieren, sobald die modale Ansicht geöffnet ist, und deaktivieren, wenn sie geschlossen ist.

Ich habe versucht, den JS-Code zu ändern, aber es funktioniert, aber es bricht die Eröffnungsanimation. hier ist der Code geändert:

(function() { 
var triggerBttn = document.getElementById('trigger-overlay'), 
    overlay = document.querySelector('div.overlay'), 
    bodyTag = document.querySelector('body'), 
    closeBttn = overlay.querySelector('button.overlay-close'); 
    transEndEventNames = { 
     'WebkitTransition': 'webkitTransitionEnd', 
     'MozTransition': 'transitionend', 
     'OTransition': 'oTransitionEnd', 
     'msTransition': 'MSTransitionEnd', 
     'transition': 'transitionend' 
    }, 
    transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ], 
    support = { transitions : Modernizr.csstransitions }; 

function toggleOverlay() { 

    if(classie.has(overlay, 'open')) { 
     classie.remove(overlay, 'open'); 
     classie.add(overlay, 'close'); 

     var onEndTransitionFn = function(ev) { 
      if(support.transitions) { 
       if(ev.propertyName !== 'visibility') return; 
       this.removeEventListener(transEndEventName, onEndTransitionFn); 
      } 

      classie.remove(overlay, 'close'); 
      classie.remove(bodyTag, 'noscroll'); 
     }; 
     if(support.transitions) { 
      overlay.addEventListener(transEndEventName, onEndTransitionFn); 
     } 
     else { 
      onEndTransitionFn(); 
     } 
    } 
    else if(!classie.has(overlay, 'close')) { 
     classie.add(overlay, 'open'); 
     classie.add(bodyTag, 'noscroll'); 
    } 
} 

triggerBttn.addEventListener('click', toggleOverlay); 
closeBttn.addEventListener('click', toggleOverlay);})(); 

Original-Demo: jsfiddle

Answer 1

bereits hier diskutiert: Prevent BODY from scrolling when a modal is opened

es Bootstrap verwendet, aber die gleiche Lösung noch arbeiten kann. Die zweite Antwort ist ein bisschen besser als die angenommene. es schlägt vor, eine Klasse auf dem Körper zu schalten, die den Körper overflow: hidden; macht, wenn das Modal geöffnet ist.

Answer 2

Zuerst jquery hinzufügen. Download von https://jquery.com und fügen Sie es Ihrem Dokument mit <script src="jquery.min.js"></script> hinzu.

Dann am unteren Rand des Dokuments (Dokument mit Animation) fügen Sie den folgenden Schnipsel:

<script> 
    $(document).ready(function() { 
     $('#trigger-overlay').click(function() { 
      $('html').css('overflow', 'hidden'); 
      $('body').bind('touchmove', function(e) { 
       e.preventDefault() 
      }); 
     }); 
     $('.overlay-close').click(function() { 
      $('html').css('overflow', 'scroll'); 
      $('body').unbind('touchmove'); 
     }); 
    }); 
</script> 

Ich habe dies mit Code versucht, aus https://github.com/codrops/FullscreenOverlayStyles und Animation Huge inc. Dies verhindert das Scrollen von Text, wenn die Animation geöffnet ist.

Aktualisiert meine Antwort, erste Antwort erlaubt Scrollen auf Touch-Geräten.