Estoy creando una aplicación web progresiva con Vue, y uno de los problemas con los que me encuentro se refiere a las animaciones de desplazamiento que se encuentran (en su mayoría) en los navegadores móviles. IOS tiene el efecto de la banda elástica, y Android agregó recientemente algo similar.

Soy consciente de que puedo desactivar esos efectos por completo (como se describe aquí Tome el control de su desplazamiento: personalice los efectos de actualización y desbordamiento ), pero eso no es lo que quiero. Me gustaría tener estos efectos de desbordamiento habilitados, pero no deberían afectar mi barra de navegación fija.

Como ejemplo, parece que la página de revisión de Pitchfork tiene un problema similar al que estoy describiendo (en Chrome Mobile, Android 12). Cuando llega a la parte superior de la página, la barra de navegación inferior se sumerge debajo de la parte inferior de la pantalla.

¿Hay alguna forma de arreglar realmente una barra de navegación en la parte inferior, independientemente de las animaciones de desplazamiento que puedan tener lugar en el cuerpo?