Khóa cuộn cho phần thân trong khi menu di động đang mở không hoạt động

Question

Tôi đã tìm thấy một số giải pháp khác thể hiện cách bạn có thể khóa hành vi cuộn cho trang web bằng cách sử dụng thuộc tính tràn CSS. Vì vậy, tôi đã triển khai giải pháp này và thêm overflow: hidden; vào thẻ body khi menu mở. Tuy nhiên khi sử dụng iOS Safari hoặc Chrome, cơ thể vẫn có thể cuộn được.

CSS:

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

JS:

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

Giải pháp mà tôi đưa ra là phần mềm hack và ít giải pháp hơn nhưng lại hoàn thành công việc. Những gì tôi đã làm là sửa vị trí trên cơ thể khi menu được mở ra và tính toán và thiết lập vị trí scrollTop khi menu được mở hoặc đóng.

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

Ở đây bạn đi cho sửa chữa nhanh chóng

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

Hãy tìm ra kịch bản biến đổi ở đây

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