如何在单击特定按钮时禁用正文滚动

Question

我创建了一个带有菜单＆amp;的HTML页面。内容。

桌面上一切正常，但是当在移动设备中点击菜单时，滚动时主体内容与菜单项重叠（当滚动菜单时，内容也在滚动）。

我尝试使用overflow: hidden和position:fixed， 但它使整个页面不可滚动，即使没有单击该按钮也是如此。

有人可以帮我解决这个问题吗？

我尝试了以下内容：

我的JS：

 $(document).ready(function () {
    $("#mobile-toggle").click(function () {
        $('body').css('overflow', 'hidden'); 
    });
});

我的按钮：

<button id="mobile-toggle" class="mobile-toggle">
    _('mobile-toggle')<span></span>
</button>

单击时禁用滚动，但它无法在移动设备上运行。

Answer 1

你需要重新设计你的css以便它具有响应性 - 这将是一个良好的开端Responsive Design

Answer 2

尝试使用您的选择器定位html元素：

$('body,html').css('overflow', 'hidden');