La propiedad scroll-margin de CSS es una de esas en las que he pensado desde hace años como una que debería existir. Y no sé cómo no he dado con ella hasta ahora, a pesar de que está disponible desde el lanzamiento de CSS3. Gran descubrimiento, aunque sea tardío.
scroll-margin permite definir el margen de un elemento respecto a los límites relativos del elemento que los contiene. Quién no ha necesitado esto cuando se utilizan anchors y se crea un menú con enlaces que llevan a distintas secciones –distintas alturas en el scroll– de la página actual.
Para usarlo hay que aplicar tres propiedades, una al elemento que contiene las secciones, y otras dos a cada una de las secciones:
#container {
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.scrollable-item {
scroll-snap-align: start;
scroll-margin: 20px;
}
Y el HTML:
<div id="container"> <div id="section-1" class="scrollable-item"></div> <div id="section-2" class="scrollable-item"></div> <div id="section-3" class="scrollable-item"></div> </div>
Visto en el infinito manual de W3School.