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

Question

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

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

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

标签： javascripthtmljquerycss

Answer 1

我想，当你所有的容器都是width: 100%+translateX(290px);时，这超过了 100%。当移动菜单处于活动状态时，您应该将某些类切换为bodywith 。overflow-x: hidden;

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