CSS＆＃34;职位：固定＆＃34;缩放时无法在移动设备上正常工作

Question

我正在实施固定的垂直菜单。它在桌面上运行良好，在移动设备（IOS，Android）上看起来很棒......只要你不放大页面。当您放大移动设备时，固定元素开始覆盖其他页面内容（因为它应该固定到视口上的某个位置）。

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

Answer 1

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

• 使用视口元标记禁用缩放（但这可能对可访问性不利）。
• 使用移动设备上的javascript控制菜单位置。例如，通过代替使用固定位置，给它一个绝对位置，并在每个window.scroll事件上，更新菜单的顶部位置。然而，这将导致在不是现有技术的设备上产生令人不快的结果（因此在大多数设备上，您将看到位置更新且持续震动）。第二个问题是Apple设备上的平滑滚动，这会阻止您在“平滑滚动”期间获取有关文档滚动位置的任何信息。因此，您还必须禁用平滑滚动（可能在身体上使用CSS线），但这也会给用户带来负面体验。

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