在疊加模式視圖中禁用正文滾動

Question

我正在使用此腳本來顯示和隱藏模態視圖，但是我想在打開模態視圖時禁用主體上的滾動，並在關閉時禁用它。

我試圖修改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

Answer 1

首先添加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代碼。 這將阻止在動畫打開時滾動文本。

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

Answer 2

已在此處討論： 當打開模態時，防止BODY滾動

它使用bootstrap，但相同的解決方案仍然可以工作。 第二個答案比接受的答案好一點。 它建議在身體上翻一個使身體overflow: hidden; 當模態打開時。