[英]Scroll lock for body while mobile menu is open is not working
我找到了幾個其他解決方案,演示了如何使用CSS overflow屬性鎖定網站的滾動行為。 因此我已經實現了這個解決方案並添加了overflow: hidden;
菜單打開時到body標簽。 但是,當使用iOS Safari或Chrome時,正文仍然可滾動。
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');
}
在這里,您可以快速修復
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);
}
我遇到的解決方案更多的是黑客而不是解決方案,但無論如何都可以完成工作。 我所做的是在菜單打開時修正身體上的位置,並在菜單打開或關閉時計算並設置scrollTop位置。
jQuery的:
var tempScrollTop = null;
tempScrollTop = $(window).scrollTop();
$(window).scrollTop(tempScrollTop);
var fixed = document.getElementById('fixed--nav');
fixed.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.