移动设备缩放时，CSS中的"position: fixed"不起作用。

Question

4

我正在实现一个固定的垂直菜单，在桌面上表现良好，在移动设备（IOS，Android）上看起来也不错......只要您不放大页面。当您在移动设备上缩放时，固定元素开始覆盖其他页面内容（因为它应该固定在视口上的某个地方）。

但是我想要的是一个仅垂直固定的导航栏。所以如果您缩放并水平滚动，则导航栏不会覆盖内容。有办法做到这一点吗？

- user3223658

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hacktisch · Accepted Answer

这是一个常见的问题，据我所知，仅使用CSS不能修复垂直滚动。您可以选择以下方案之一：

使用viewport元标签禁用缩放（但这可能会影响可访问性）。
在移动设备上使用JavaScript控制菜单位置。例如，不要使用固定位置，而要给它一个绝对位置，并在每个window.scroll事件上更新菜单的顶部位置。然而，这将导致在非最新设备上出现不良结果（所以在大多数设备上，您会看到位置会因不断震荡而更新）。第二个问题将是苹果设备的平滑滚动，这会阻止您获取有关“平滑滚动”期间文档滚动位置的任何信息。因此，您还需要禁用平滑滚动（可以在body上使用CSS行），但这也会给用户带来负面体验。

这就是为什么菜单通常会被转换成一个汉堡图标，并且只有当单击汉堡图标后才会显示。小汉堡图标在水平滚动期间不会像在顶部左侧那样让人讨厌，因为它非常小。