0
428
ViewsHacer que los elementos fijos de la página "honren" el relleno del cuerpo ¿no?
Mi botón fijo activa un menú. Mientras el menú está abierto, el cuerpo tiene overflow-y: hidden y padding-right: 17px (en realidad, este valor se calcula, se omite por brevedad). El botón ( position: fixed ) se desplaza.
El HTML (el <p> solo es necesario para mostrar la barra de desplazamiento):
<body> <button class="btn"> Menu </button> <p style="height: 5000px;"></p> </body> Para el CSS... tenga en cuenta que .menu-opened se agrega cuando hace clic en el botón, a través de JavaScript:
body { background-color: blue; } body.menu-opened { padding-right: 17px; overflow-y: hidden; } /* Useless styles */ .btn { background-color: red; position: fixed; padding: 1rem; top: 0; right: 0; margin-right: 2rem; margin-top: 2rem; }Tan pronto como se deshabilitan las barras de desplazamiento, el botón se desplaza porque los elementos fijos no respetan el relleno del cuerpo (que se agrega para compensar la ausencia de la barra de desplazamiento). ¿Alguna idea de cómo solucionar esto, sin tocar todos los elementos fijos?
Creo que este es un problema común, por lo que debería haber una solución fácil, pero no puedo conseguirlo.
1 answers
Answer question0
Eche un vistazo a scrollbar-gutter : MDN: scrollbar-gutter