html - 缩放时 CSS "position: fixed"在移动设备上无法正常工作

Question

我正在实现一个固定的垂直菜单。它在桌面上运行良好，在移动设备(IOS、Android)上看起来也很棒……只要您不放大页面即可。当您在移动设备上缩放时，固定元素开始覆盖其他页面内容(因为它应该固定在视口(viewport)上的某个位置)。

但我正在寻找的是一个仅垂直固定的导航栏。因此，如果您放大并水平滚动，导航栏不会覆盖内容。有办法做到这一点吗？

Answer 1

这是一个常见问题，据我所知，仅使用 CSS 无法仅垂直修复。您可以选择:

• 使用视口(viewport)元标记禁用缩放(但这可能不利于可访问性)。
• 在移动设备上使用 javascript 控制菜单位置。例如，不是使用固定位置，而是给它一个绝对位置，并在每个 window.scroll 事件上更新菜单的顶部位置。然而，这会在非最先进的设备上导致令人不快的结果(因此在大多数设备上，您会看到位置更新伴随着不断的冲击)。第二个问题是 Apple 设备上的平滑滚动，这会阻止您在“平滑滚动”期间获取有关文档滚动位置的任何信息。因此，您还必须禁用平滑滚动(可能在主体上使用 CSS 行)，但这也会给用户带来负面体验。

这就是为什么菜单通常变成汉堡包图标并且只有在按下汉堡包图标时才会出现的原因。水平滚动时左上角的小汉堡图标不会那么烦人，因为它很小。