javascript - 关闭可插入内容的Canvas侧边栏？

是否可以在从左侧过渡到侧面导航菜单的同时推送其他内容以及不透明的颜色叠加层？

我尝试做的版本在台式机的浏览器中可以完美运行，但是当我切换到移动设备时，侧边栏会扩展页面的高度，并且页面会失去流程。

示例：已更新https://www.codeply.com/p/RRVDkqEyj4-当我在移动设备上通过Codeply查看页面时，它可以完美运行。但是，this是仅当左菜单上载到我的网站时在移动设备上显示的方式。另外，如果我从右侧向左菜单过渡，那也可以正常工作，并且菜单不会缩放更大...这与从左侧向内过渡有关。

编辑：Codeply链接已更新代码。

编辑：My issue has now been resolved。

最佳答案

问题在于您正在对#mainWrapper（translateX(80%)）应用转换，这也会影响其中的position:fixed元素。

您可以重新设置整个页面的样式，以确保#mainWrapper元素一直到达页面底部，也可以将叠加层移到#mainWrapper之外。



只需将两个叠加移到异地

更改

<div class="main-wrapper" id="mainWrapper" style="height: 100vh; width: 100vw;">
    <div class="service-menu-overlay" id="serviceMenuOverlay" onClick="closeServices()"></div>
    <div class="burger-menu-overlay" id="burgerMenuOverlay" onClick="closeBurger()"></div>

至

<div class="service-menu-overlay" id="serviceMenuOverlay" onClick="closeServices()"></div>
<div class="burger-menu-overlay" id="burgerMenuOverlay" onClick="closeBurger()"></div>

<div class="main-wrapper" id="mainWrapper" style="height: 100vh; width: 100vw;">

和

.service-menu-overlay.overlay-show{z-index: 5000 !important;}

至

.service-menu-overlay.overlay-show{z-index: 1 !important;}

应该解决大多数问题。