当弹出打开并在移动上显示菜单时禁用滚动

Question

谢谢你调查我的问题

我正在创建一个网站：http://testgod0312.000webhostapp.com/，所有的css都是按块分开的，这样您就可以更容易地帮助我(在资产文件夹中)。

1. 当你去地图，点击一个按钮，一个弹出显示，但你可以继续滚动。该按钮仅用css (没有js)编码，map.css文件中的所有内容--知道如何在不诉诸js的情况下禁用溢出吗？如果使用js，您会做什么，因为没有捕捉打开/关闭框的功能？
2. 我有一个菜单(点击右上角)，在笔记本电脑上工作很好，但在手机上，它只显示了50%。代码在nav.css中；响应程序位于底部。知道怎么把它全部展示出来吗？

提前谢谢！！法法

Answer 1

#1没有javascript是无法解决的，只要浏览器不支持css:has()。因此，唯一的方法是在弹出窗口打开后立即将类或style="overflow: none;"应用于主体，并在其关闭后将其移除。如果打开/关闭菜单，也会发生同样的情况。

一个非常小的代码片段就足够了：

window.addEventListener("hashchange",
  () => document.body.classList.toggle("popup-open", location.hash.startsWith('#popup'))
);

和CSS

body.popup-open {
  overflow: none;
}

关于nav.css中的#2，在媒体查询(@media all and (max-width: 767px) {)之前应用的值会引起问题。

在小屏幕上，menu__right从flex变为none。而且menu__left对于大屏幕仍然有正确的50%的应用值，因此将媒体查询中的这个值调整为0%可以解决这个问题。

    .menu__left {
        right: 0%;
        width: 100%;
    }