当导航菜单翻译带有溢出隐藏的网页时水平滚动

Question

我目前正在制作我的第一个个人页面。 我在较小的媒体查询上进行水平滚动，而我不应该这样做，而且我无法找到罪魁祸首。 所有容器都设置为 100% 宽度并隐藏它们的 overflow-x，一旦页面宽度达到 1200 像素，侧面导航就会折叠。 但是，一旦您切换“汉堡包”，菜单应该滑出并将主要部分的内容推出并隐藏溢出，直到在菜单中选择锚点。 此时页面应该回到原来的位置并滚动到所需的部分，直到我在开发工具中打开触摸模拟时我才注意到它在移动设备上完全被触摸破坏了。 但是在移动视图中使用浏览器滚动可以正常工作。

如果有人有任何想法，请告诉我，你可以在这里找到我的网站： https://imaleks.dev/

如果这打破了这一切的任何新礼仪，请提前道歉。

Answer 1

我认为，当所有容器都是width: 100% + translateX(290px); ，这超过了 100%。 您应该将一些 class 切换到具有溢出-x 的body overflow-x: hidden; 当移动菜单处于活动状态时。

或者你可以保持overflow-x: hidden; 为body永久。 这将完全禁用水平滚动。