El desplazamiento en el comportamiento de la propiedad CSS

CSS | propiedad scroll-comportamiento : Aquí, vamos a aprender acerca de la propiedad de desplazamiento -comportamiento en CSS con ejemplos .

CSS | propiedad scroll-comportamiento

¿Quién no quiere sus enlaces a la función sin problemas y de forma atractiva? Este tipo de funcionalidad es muy fácil de implementar. Todo lo que necesita es un poco de conciencia sobre la propiedad que ayudaría en la consecución de la misma. El nombre de esa propiedad es la propiedad scroll- comportamiento .

La propiedad de desplazamiento en el comportamiento en el CSS es beneficiosa class suavizar la animación de la posición de desplazamiento en vez de saltar directamente al elemento.

Cuando tenemos que añadir enlaces en nuestra página y queremos que el usuario haga clic en los enlaces que realiza su operación sin problemas. Por lo tanto, esta propiedad ayuda en una transición suave de un enlace a otro dentro de un cuadro de desplazamiento confinado.

Sintaxis:

Element {
scroll-behavior: auto|smooth;
}

Esta propiedad consta de dos atributos muy fundamentales. Vamos a seguir adelante y echar un vistazo a ellos uno por uno!

Los valores de propiedad de desplazamiento en el comportamiento

1) suavizar

Smooth , el nombre mismo da la definición de esta propiedad. Esta propiedad se utiliza para añadir un efecto de suavizar animada de desplazamiento entre los diferentes elementos cuando se hace clic en un enlace en un cuadro de desplazamiento.

Sintaxis:

Element {
scroll-behavior: smooth;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
html {
scroll-behavior: smooth;
}
#div1 {
height: 400px;
background-color: #f1f1f1;
}
#div2 {
height: 500px;
background-color: #FFFF33;
}
</style>
</head>
<body>
<div class="main" id="div1">
<h2>Division 1</h2>
<p>Click on the link below</p>
<a href="#div2">Click Me for Smooth Scroll to Section 2 Below</a>
</div>
<div class="main" id="div2">
<h2>Division 2</h2>
<a href="#div1">Click Me for Smooth Scroll to Section 1 Above</a>
</div>
</body>
</html>

salida

The scroll-behavior Property in CSS - 4

Vaya por delante y se sienten libres para ejecutar el código anterior para ver el efecto de desplazamiento suave.

2) automático

automático es otra propiedad muy útil for de desplazamiento en el comportamiento , esta propiedad se utiliza para especificar el efecto de desplazamiento salto directo cuando el usuario hace clic en un enlace a otro enlace dentro de una cuadro de desplazamiento. También es el valor class.

Sintaxis:

Element {
scroll-behavior: auto;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
html {
scroll-behavior: auto;
}
#div1 {
height: 500px;
background-color: #f1f1f1;
}
#div2 {
height: 300px;
background-color: #FFFF33;
}
</style>
</head>
<body>
<div class="main" id="div1">
<h2>Division 1</h2>
<p>Click on the link below</p>
<a href="#div2">Click Me to Auto Scroll to Section 2 Below</a>
</div>
<div class="main" id="div2">
<h2>Division 2</h2>
<a href="#div1">Click Me to Auto Scroll to Section 1 Above</a>
</div>
</body>
</html>

salida

The scroll-behavior Property in CSS - 5

¿Por qué no seguir adelante y ejecutar el código anterior para ver el efecto de desplazamiento automático ?

Un consejo: Es recomendable aplicar esta propiedad cuando se trata de enlaces como esta propiedad ayudaría en perfecto funcionamiento y hace que su sitio web muy sensible también.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *