मोबाइल मेनू खुला होने पर शरीर के लिए स्क्रॉल लॉक काम नहीं कर रहा है

Question

मुझे कई अन्य समाधान मिल गए हैं जो दर्शाते हैं कि आप सीएसएस ओवरफ्लो प्रॉपर्टी का उपयोग कर वेबसाइट के लिए स्क्रॉल व्यवहार को कैसे लॉक कर सकते हैं। इस तरह मैंने इस समाधान को कार्यान्वित किया है और मेनू खोलने पर overflow: hidden; को बॉडी टैग में जोड़ा है। हालांकि आईओएस सफारी या क्रोम का उपयोग करते समय शरीर अभी भी स्क्रॉल करने योग्य है।

सीएसएस:

body.opened-drawer { 
     overflow: hidden !important; 
     height: 100% !important; 
     width: 100% !important; 
     position: fixed !important; 
     z-index: 0 !important; 
    } 

जे एस:

timber.openDrawerMenu = function() { 
    var $mobileMenu = $('.nav-bar'), 
     $mobileMenuButton = $('#menu-opener'), 
     $body = $('body'); 
     $mobileMenuButton.addClass('opened'); 
     $mobileMenu.addClass('opened'); 
     $body.addClass('opened-drawer'); 

    // Make drawer a11y accessible 
    timber.cache.$navBar.attr('aria-hidden', 'false'); 

    // Set focus on drawer 
    timber.trapFocus({ 
    $container: timber.cache.$navBar, 
    namespace: 'drawer_focus' 
    }); 

    // Escape key closes menu 
    timber.cache.$html.on('keyup.drawerMenu', function(evt) { 
    if (evt.keyCode == 27) { 
     timber.closeDrawerMenu(); 
    } 
    }); 
} 

timber.closeDrawerMenu = function() { 

    var $mobileMenu = $('.nav-bar'), 
     $mobileMenuButton = $('#menu-opener'), 
     $body = $('body'); 

    $mobileMenuButton.removeClass('opened'); 
    $mobileMenu.removeClass('opened'); 
    $body.removeClass('opened-drawer'); 

    // Make drawer a11y unaccessible 
    timber.cache.$navBar.attr('aria-hidden', 'true'); 

    // Remove focus on drawer 
    timber.removeTrapFocus({ 
    $container: timber.cache.$navBar, 
    namespace: 'drawer_focus' 
    }); 

    timber.cache.$html.off('keyup.drawerMenu'); 
} 

Answer 1

जिस समाधान में मैं आया था वह एक हैक और कम समाधान है लेकिन नौकरी को किसी भी तरह से किया जाता है। मैंने जो किया था वह मेनू पर स्थिति को ठीक कर दिया गया था जब मेनू खोला गया था और स्क्रॉलटॉप स्थिति को सेट और सेट किया गया था क्योंकि मेनू खोला या बंद था।

jQuery:

var tempScrollTop = null; 

    tempScrollTop = $(window).scrollTop(); 

    $(window).scrollTop(tempScrollTop); 

    var fixed = document.getElementById('fixed--nav'); 
     fixed.addEventListener('touchmove', function(e) { 
     e.preventDefault(); 
    }, false); 

Answer 2

यहाँ आप त्वरित सुधार

body.opened-drawer { 
    overflow: hidden; 
    height: 100%; 
    width: 100%; 
    position: fixed; 
    z-index: 0; 
} 

के लिए जाना कृपया संशोधित स्क्रिप्ट

function menuDrawerButtons(){ 

    cache.$mobileMenuButton.on('click', function(e) { 
     e.preventDefault(); 
     if ($(this).hasClass('opened')) { 
      timber.closeDrawerMenu() 
     } else { 
      timber.openDrawerMenu(); 
     }   
    }); 

    setTimeout(function() { 
     cache.$mobileMenu.addClass('animate'); 
    }, 500); 
} 

लगता है