Esta propiedad se utiliza para una animación suave de la posición de desplazamiento en lugar de un salto de desplazamiento. Cuando el usuario hace clic en los enlaces, realiza su operación sin problemas. Se utiliza para visitar un enlace a otro enlace dentro de un cuadro desplazable.
Sintaxis:
scroll-behavior: auto|smooth|initial|inherit;
Valor por defecto :
- auto
Propiedad:
- smooth: esta propiedad se utiliza para especificar el efecto de animación del desplazamiento entre los elementos dentro del cuadro desplazable.
Sintaxis:
scroll-behavior:smooth;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | scroll-behavior Property
</title>
<style>
.g4g {
font-size:40px;
font-weight:bold;
color:green;
text-align:center;
}
html {
scroll-behavior: smooth;
}
#geeks {
height: 400px;
background-color: coral;
}
#gfg {
height: 400px;
background-color: lightblue;
}
a {
text-decoration:none;
font-size:25px;
font-weight:bold;
}
</style>
</head>
<body>
<div class = "g4g">GeeksforGeeks</div>
<h2 style="text-align:center;">
Scroll-behaviour:smooth;
</h2>
<div class="main" id="geeks">
<a href="#gfg">geeksforgeeks</p>
</div>
<div class="main" id="gfg">
<a href="#geeks">GEEKSFORGEEKS</a>
<p style="color:green;">
A computer science portal for geeks.
</h3>
</div>
</body>
</html>
Producción:
- auto: se utiliza para especificar el efecto de desplazamiento de salto directo de un enlace a otro enlace dentro de un cuadro de desplazamiento.
Sintaxis:
scroll-behavior:auto;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | scroll-behavior Property
</title>
<style>
.g4g {
font-size:40px;
font-weight:bold;
color:green;
text-align:center;
}
html {
scroll-behavior: auto;
}
#geeks {
height: 400px;
background-color: coral;
}
#gfg {
height: 400px;
background-color: lightblue;
}
a {
text-decoration:none;
font-size:25px;
font-weight:bold;
}
</style>
</head>
<body>
<div class = "g4g">GeeksforGeeks</div>
<h2 style="text-align:center;">
scroll-behaviour:auto;
</h2>
<div class="main" id="geeks">
<a href="#gfg">geeksforgeeks</p>
</div>
<div class="main" id="gfg">
<a href="#geeks">GEEKSFORGEEKS</a>
<p style="color:green;">
A computer science portal for geeks.
</h3>
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad de comportamiento de desplazamiento se enumeran a continuación:
- Google Chrome 61.0
- Borde 79.0
- Firefox 36.0
- Ópera 48.0
- Safari 15.4
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA