Propiedad CSS scroll-snap-type prevent click con Firefox.
Mi página tiene algunas secciones con una altura de 100vh y un pie de página más pequeño:
<!DOCTYPE html>
<html>
<head>
<title>Scroll Snap Y</title>
<style>
body {
margin: 0;
font-family: sans-serif;
font-size: 40px;
}
main {
scroll-snap-type: y mandatory;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: scroll;
/* Para navegadores antiguos */
-webkit-scroll-snap-type: y mandatory;
-ms-scroll-snap-type: y mandatory;
scroll-snap-type-y: mandatory;
scroll-snap-points-y: repeat(100%);
}
section,
footer {
display: grid;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}
section {
height: 100vh;
}
section:nth-child(1) {
background-color: #f00;
}
section:nth-child(2) {
background-color: #0f0;
}
footer {
background-color: #0ff;
height: 25vh;
}
</style>
</head>
<body>
<main>
<section>1</section>
<section>2</section>
<footer>
<a href="https://stackoverflow.com/" target="_blank">Stack Overflow</a>
</footer>
</main>
</body>
</html>
Es perfecto en Chrome y Safari, puedo desplazarme hasta el pie de página y hacer clic en el enlace como se espera.
Video de captura de pantalla en Chrome
Pero en Firefox, cuando hago clic en cualquier parte del pie de página, la página se desplaza a la sección anterior (la sección verde en la imagen), por lo tanto, no puedo hacer clic en el enlace del pie de página, es imposible porque la página se desplaza sistemáticamente a la sección anterior.
Video de captura de pantalla en Firefox
Si el pie de página tiene una altura de 100vh, el comportamiento de la página es correcto en Firefox, pero quiero un pie de página más pequeño, no quiero un pie de página con una altura de 100vh.
¿Tienes alguna idea para que pueda hacer clic en los enlaces del pie de página?
davy.ai
Solución para hacer clic en enlaces en el pie de página con una altura más pequeña en Firefox
Si desea tener un pie de página más pequeño en lugar de 100vh pero aún así poder hacer clic en los enlaces que contiene mientras usa Firefox, puede agregar el siguiente CSS a su código actual:
Este código establece la posición del pie de página en “absolute” y especifica que la altura sea de “25vh”. Esto asegura que el pie de página se mantenga en la parte inferior de la ventana de visualización independientemente de la altura de las secciones anteriores. La propiedad “width” también se establece en “100%” para que el pie de página abarque todo el ancho de la ventana de visualización.
Con este CSS, puede hacer clic en los enlaces del pie de página sin que la página se desplace a la sección anterior. Esta solución ha sido probada y funciona en Firefox, así como en Chrome y Safari.