La propiedad Style overflowY en HTML DOM se usa para especificar el comportamiento del contenido cuando desborda los bordes superior e inferior de un elemento. El contenido puede estar oculto, mostrado o una barra de desplazamiento según el valor.
Sintaxis:
- Devuelve la propiedad overflowY.
object.style.overflowY
- Se utiliza para establecer la propiedad overflowY.
object.style.overflowY = "scroll|hidden|visible|auto|initial|inherit"
Valores devueltos: Devuelve un valor de string, que representa la propiedad overflow-y de un elemento
Valores de propiedad:
- desplazamiento: el contenido se recorta para ajustarse al cuadro del elemento y se proporciona una barra de desplazamiento para ayudar a desplazar el contenido extra desbordado. La barra de desplazamiento aquí se agrega incluso si el contenido no está recortado.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style overflowY Property
</title>
<style>
.content {
background-color: lightgreen;
height: 150px;
width: 200px;
overflow-y: hidden;
}
button {
margin-top: 60px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>DOM Style overflowY Property</b>
<p>
The overflowY property specifies the
behavior of content when it overflows
a block-level element’s top and
bottom edges.
</p>
<div class = "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.
<br>The portal also has dedicated GATE
preparation and competitive programming
sections.
</div>
<button onclick = "myGeeks()">
Change overflowY
</button>
<!-- script to create overflowY -->
<script>
function myGeeks() {
elem = document.querySelector('.content');
elem.style.overflowY = 'scroll';
}
</script>
</body>
</html>
- Salida: Antes de hacer clic en el botón:
Después de hacer clic en el botón:
- oculto: el contenido se recorta y se oculta para ajustarse al elemento. No se proporcionan barras de desplazamiento cuando se utiliza este valor.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style overflowY Property
</title>
<style>
.content {
background-color: lightgreen;
height: 150px;
width: 200px;
}
button {
margin-top: 60px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>DOM Style overflowY Property</b>
<p>
The overflowY property specifies the
behavior of content when it overflows
a block-level element’s top and
bottom edges.
</p>
<div class = "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.
<br>The portal also has dedicated GATE
preparation and competitive programming
sections.
</div>
<button onclick = "myGeeks()">
Change overflowY
</button>
<!-- script to create overflowY -->
<script>
function myGeeks() {
elem = document.querySelector('.content');
elem.style.overflowY = 'hidden';
}
</script>
</body>
</html>
- Salida: Antes de hacer clic en el botón:
Después de hacer clic en el botón:
- visible: el contenido no se recorta y puede desbordarse hacia la parte superior o inferior del elemento que lo contiene.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style overflowY Property
</title>
<style>
.content {
background-color: lightgreen;
height: 150px;
width: 200px;
overflow-y: hidden;
}
button {
margin-top: 60px;
}
</style>
</head>
<body>
<h1 style = "color: green">
GeeksforGeeks
</h1>
<b>DOM Style overflowY Property</b>
<p>
The overflowY property specifies the
behavior of content when it overflows
a block-level element’s top and bottom
edges.
</p>
<div class = "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. <br>The portal
also has dedicated GATE preparation
and competitive programming sections.
</div>
<button onclick = "myGeeks()">
Change overflowY
</button>
<!-- script to use oveflowY property -->
<script>
function myGeeks() {
elem = document.querySelector('.content');
elem.style.overflowY = 'visible';
}
</script>
</body>
</html>
- Salida: Antes de hacer clic en el botón:
Después de hacer clic en el botón:
- auto: el comportamiento de auto depende del contenido y las barras de desplazamiento se agregan solo cuando el contenido se desborda.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style overflowY Property
</title>
<style>
.content {
background-color: lightgreen;
height: 150px;
width: 200px;
}
button {
margin-top: 60px;
}
</style>
</head>
<body>
<h1 style = "color: green">
GeeksforGeeks
</h1>
<b>DOM Style overflowY Property</b>
<p>
The overflowY property specifies the
behavior of content when it overflows
a block-level element’s top and bottom
edges.
</p>
<div class = "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. <br>The portal
also has dedicated GATE preparation
and competitive programming sections.
</div>
<button onclick = "myGeeks()">
Change overflowY
</button>
<!-- script to use oveflowY property -->
<script>
function myGeeks() {
elem = document.querySelector('.content');
elem.style.overflowY = 'auto';
}
</script>
</body>
</html>
- Salida: Antes de hacer clic en el botón:
Después de hacer clic en el botón:
- initial: establece la propiedad overflowY de estilo en su valor predeterminado.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style overflowY Property
</title>
<style>
.content {
background-color: lightgreen;
height: 150px;
width: 200px;
overflow-y: scroll;
}
button {
margin-top: 60px;
}
</style>
</head>
<body>
<h1 style = "color: green">
GeeksforGeeks
</h1>
<b>DOM Style overflowY Property</b>
<p>
The overflowY property specifies the
behavior of content when it overflows
a block-level element’s top and bottom
edges.
</p>
<div class = "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. <br>The portal
also has dedicated GATE preparation
and competitive programming sections.
</div>
<button onclick = "myGeeks()">
Change overflowY
</button>
<!-- script to use oveflowY property -->
<script>
function myGeeks() {
elem = document.querySelector('.content');
elem.style.overflowY = 'initial';
}
</script>
</body>
</html>
- Salida: Antes de hacer clic en el botón:
Después de hacer clic en el botón:
- heredar: Esto hereda la propiedad de su padre.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style overflowY Property
</title>
<style>
#parent {
/* setting the parent div
to 'auto' */
overflow-y: auto;
}
.content {
background-color: lightgreen;
height: 150px;
width: 200px;
}
button {
margin-top: 60px;
}
</style>
</head>
<body>
<h1 style = "color: green;">
GeeksforGeeks
</h1>
<b>DOM Style overflowY Property</b>
<p>
The overflowY property specifies the
behavior of content when it overflows
a block-level element’s top and bottom
edges.
</p>
<div id = "parent">
<div class = "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. <br>The portal
also has dedicated GATE preparation and
competitive programming sections.
</div>
</div>
<button onclick = "myGeeks()">
Change overflowY
</button>
<!-- script to set style overflowY property -->
<script>
function myGeeks() {
elem = document.querySelector('.content');
elem.style.overflowY = 'inherit';
}
</script>
</body>
</html>
- Salida: Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Navegadores compatibles: los navegadores compatibles con la propiedad overflowY del estilo DOM se enumeran a continuación:
- Chrome 1 y superior
- Borde 12 y superior
- Internet Explorer 5 y superior
- Firefox 3.5 y superior
- Safari 3 y superior
- Ópera 9.5 y superior
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA