在疊加模式視圖中禁用滾動身體

我正在使用this script來顯示和隱藏模式視圖，但是我希望在打開模式視圖時禁用滾動，並在關閉模式視圖時禁用它。在疊加模式視圖中禁用滾動身體

我試圖修改JS代碼，但它的作品，但它打破了開場動畫。這裏是修改了代碼：

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

原始演示：jsfiddle

來源

2014-02-27 Dev4life

這裏已經討論：Prevent BODY from scrolling when a modal is opened

它使用自舉，但同樣的解決方案仍然可以正常工作。第二個答案比接受的要好一點。它建議在開啓模式時在身體上打開一個類，使身體overflow: hidden;。

來源

2014-02-27 20:22:39 jakealbaugh

如果你看看我的代碼，你會發現我試圖實現這個解決方案，但正如我提到它不工作，它打破了動畫 – Dev4life

首先添加jquery。從https://jquery.com下載並使用<script src="jquery.min.js"></script>將其添加到您的文檔。

然後，在文檔的底部（與你的動畫文檔）添加以下剪斷：

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

我曾與代碼https://github.com/codrops/FullscreenOverlayStyles和動畫Huge inc嘗試這個。這將防止動畫打開時滾動文本。

更新我的回答，第一個答案確實允許在觸摸設備上滾動。

來源

2015-07-13 17:06:35 Adam

在疊加模式視圖中禁用滾動身體

回答

相關問題