La propiedad overscroll-behavior-y se utiliza para establecer el comportamiento del navegador cuando se alcanza el límite vertical de un área de desplazamiento. Esto se puede usar en sitios web donde hay múltiples áreas de desplazamiento y el desplazamiento de un área no afecta la página en su conjunto. Este efecto se conoce como enstringmiento de desplazamiento y se puede habilitar o deshabilitar según corresponda.
Sintaxis:
overscroll-behavior-y: auto | contain | none | initial | inherit
Valores de propiedad:
- auto: Esto se usa para establecer el comportamiento de desplazamiento por defecto en todos los elementos. Toda la página se desplazará incluso si se alcanza el límite del elemento. Es el valor predeterminado.
Ejemplo:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
CSS | overscroll-behavior-y
</
title
>
<
style
>
.container {
display: flex;
}
.main-content {
width: 200px;
background-color: lightgreen;
}
.smaller-box {
overscroll-behavior-y: auto;
height: 100px;
width: 125px;
margin: 25px;
overflow-y: scroll;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color: green"
>
GeeksforGeeks
</
h1
>
<
b
>CSS | overscroll-behavior-y</
b
>
<
p
>overscroll-behavior-y: auto</
p
>
<
div
class
=
"container"
>
<
div
class
=
"main-content"
>
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes and
interview questions. The portal also
has dedicated GATE preparation and
competitive programming sections.<
br
><
br
>
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes and
interview questions. The portal also
has dedicated GATE preparation and
competitive programming sections.
</
div
>
<
div
class
=
"smaller-box"
>
This is a smaller element that is also
scrollable. The overscroll behavior
can be used to control if the main
content behind would scroll when this
element's vertical boundary is reached.
</
div
>
</
div
>
</
body
>
</
html
>
Salida: Desplazarse hacia abajo en el elemento más pequeño
- contiene: se utiliza para establecer el comportamiento de desplazamiento por defecto solo en el elemento utilizado. No se produciría ningún enstringmiento de desplazamiento en las áreas de desplazamiento vecinas y los elementos que se encuentran detrás no se desplazarán.
Ejemplo:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
CSS | overscroll-behavior-y
</
title
>
<
style
>
.container {
display: flex;
}
.main-content {
width: 200px;
background-color: lightgreen;
}
.smaller-box {
overscroll-behavior-y: contain;
height: 100px;
width: 125px;
margin: 25px;
overflow-y: scroll;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color: green"
>
GeeksforGeeks
</
h1
>
<
b
>CSS | overscroll-behavior-y</
b
>
<
p
>overscroll-behavior-y: contain</
p
>
<
div
class
=
"container"
>
<
div
class
=
"main-content"
>
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes and
interview questions. The portal also
has dedicated GATE preparation and
competitive programming sections.<
br
><
br
>
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes and
interview questions. The portal also
has dedicated GATE preparation and
competitive programming sections.
</
div
>
<
div
class
=
"smaller-box"
>
This is a smaller element that is also
scrollable. The overscroll behavior
can be used to control if the main
content behind would scroll when this
element's vertical boundary is reached.
</
div
>
</
div
>
</
body
>
</
html
>
Salida: Desplazarse hacia abajo en el elemento más pequeño
- ninguno: se utiliza para evitar el enstringmiento de desplazamiento en todos los elementos. También se evita el comportamiento de desbordamiento de desplazamiento predeterminado.
Ejemplo:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
CSS | overscroll-behavior-y
</
title
>
<
style
>
.container {
display: flex;
}
.main-content {
width: 200px;
background-color: lightgreen;
}
.smaller-box {
overscroll-behavior-y: none;
height: 100px;
width: 125px;
margin: 25px;
overflow-y: scroll;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color: green"
>
GeeksforGeeks
</
h1
>
<
b
>CSS | overscroll-behavior-y</
b
>
<
p
>overscroll-behavior-y: none</
p
>
<
div
class
=
"container"
>
<
div
class
=
"main-content"
>
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes and
interview questions. The portal also
has dedicated GATE preparation and
competitive programming sections.<
br
><
br
>
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes and
interview questions. The portal also
has dedicated GATE preparation and
competitive programming sections.
</
div
>
<
div
class
=
"smaller-box"
>
This is a smaller element that is also
scrollable. The overscroll behavior
can be used to control if the main
content behind would scroll when this
element's vertical boundary is reached.
</
div
>
</
div
>
</
body
>
</
html
>
Salida: Desplazarse hacia abajo en el elemento más pequeño
- initial: se utiliza para establecer el comportamiento de desplazamiento excesivo al valor predeterminado.
Ejemplo:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
CSS | overscroll-behavior-y
</
title
>
<
style
>
.container {
display: flex;
}
.main-content {
width: 200px;
background-color: lightgreen;
}
.smaller-box {
overscroll-behavior-y: initial;
height: 100px;
width: 125px;
margin: 25px;
overflow-y: scroll;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color: green"
>
GeeksforGeeks
</
h1
>
<
b
>CSS | overscroll-behavior-y</
b
>
<
p
>overscroll-behavior-y: initial</
p
>
<
div
class
=
"container"
>
<
div
class
=
"main-content"
>
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes and
interview questions. The portal also
has dedicated GATE preparation and
competitive programming sections.<
br
><
br
>
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes and
interview questions. The portal also
has dedicated GATE preparation and
competitive programming sections.
</
div
>
<
div
class
=
"smaller-box"
>
This is a smaller element that is also
scrollable. The overscroll behavior
can be used to control if the main
content behind would scroll when this
element's vertical boundary is reached.
</
div
>
</
div
>
</
body
>
</
html
>
Salida: Desplazarse hacia abajo en el elemento más pequeño
- heredar: se usa para configurar el comportamiento de desplazamiento para heredar del padre.
Navegadores compatibles: los navegadores compatibles con la propiedad overscroll-behavior-y se enumeran a continuación:
- cromo 63.0
- Firefox 59.0
- Ópera 50.0
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA