CSS sólo desplazamiento de cursor-snapy_scroll

Vista prévia

Descripción

snapy_scroll es una biblioteca de recortes CSS puro que ajusta automáticamente la sección de la página a la parte superior cuando la mayor parte de la sección es visible dentro de la ventanilla.

Basado en el CSS < a href = "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type" target = "_ blank" rel = "noopener" > Scroll-Snap-align propiedad.

Ideal para proporcionar una experiencia de desplazamiento suave y fácil de usar en su sitio web de desplazamiento de una página.

Funcionamiento

Cree secciones de página de la siguiente manera:

<section id="section-one">

<h1>This Is Section One</h1>
</section>
<section id="section-two">

<h1>This Is Section Two</h1>
</section>
<section id="section-three">

<h1>This Is Section Three</h1>
</section>
<section id="section-four">

<h1>This Is Section Four</h1>
</section>
<section id="section-five">

<h1>This Is Section five</h1>
</section>

Los trucos de CSS para hacer que las secciones de página de pantalla completa y aplicar la funcionalidad de ajuste de desplazamiento a las secciones de página durante el desplazamiento.

body{

scroll-snap-type: y mandatory;

overflow-y: scroll;
}

#section-one{

background-color:#24fe53;

text-align: center;

height: 100vh;

scroll-snap-align:start;
}

#section-two {

background-color: #fe3324;

text-align: center;

height: 100vh;

scroll-snap-align:start;
}

#section-three {

background-color: #7824fe;

text-align: center;

height: 100vh;

scroll-snap-align:start;
}

#section-four {

background-color: #2433fe;

text-align: center;

height: 100vh;

scroll-snap-align:start;
}

#section-five {

background-color: #fecb24;

text-align: center;

height: 100vh;

scroll-snap-align:start;
}