Hacer que un área de contenido en particular sea desplazable se realiza mediante el uso de la propiedad de desbordamiento de CSS . Hay diferentes valores en la propiedad de desbordamiento que se enumeran a continuación.
- visible: la propiedad indica que se puede representar fuera del cuadro de bloque y no se recorta.
- oculto: esta propiedad indica que el desbordamiento está recortado. El resto del contenido será invisible.
- automático: si se recorta el desbordamiento, automáticamente se agrega una barra de desplazamiento para el resto del contenido.
- scroll: esta propiedad indica que se agrega la barra de desplazamiento para ver el resto del contenido si está recortado.
- initial: esta propiedad se establece en su valor predeterminado.
- heredar: esta propiedad hereda la propiedad de su elemento padre.
Podemos deshabilitar el desplazamiento de la página configurando la propiedad de desbordamiento del cuerpo en hidden .
En ambos ejemplos, usaremos esta propiedad para deshabilitar el desplazamiento de la página.
Ejemplo 1: En este ejemplo, usamos la propiedad overflow: scroll para hacer que «div» se pueda desplazar vertical y horizontalmente.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
</head>
<style>
body {
/* disabling body scrolling */
overflow: hidden;
margin: auto;
background: white;
margin-top: 4%;
text-align: center;
}
h1 {
color: Green;
}
.scroll {
/* enable div scrolling */
overflow: scroll;
height: 8%;
background-color: aqua;
border: 1px black solid;
padding: 2%;
width: 300px;
margin: 0 auto;
white-space: nowrap;
font-size: large;
}
</style>
<body>
<h1>GeeksforGeeks</h1>
<h2>
Making content area scrollable
instead of the page
</h2>
<div class="scroll">
It is a good platform to learn programming.
It is an educational website. Prepare for
the Recruitment drive of product based
companies like Microsoft, Amazon, Adobe etc
with a free online placement preparation
course. The course focuses on various MCQ
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful. Also, any
geeks can help other geeks by writing
articles on the GeeksforGeeks, publishing
articles follow few steps that are<br>
Articles that need little modification or
improvement from reviewers are published
first. To quickly get your articles reviewed,
please refer existing articles, their
formatting style, coding style, and try to
make you are close to them. In case you are
a beginner, you may refer Guidelines to write
an Article. It is a good platform to learn
programming. It is an educational website.
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with<br> a free online placement preparation
course. The course focuses on various MCQ's &
Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful. Also, any
geeks can help other geeks by<br> writing
articles on the GeeksforGeeks, publishing
articles follow few steps that are Articles
that need little modification or improvement
from reviewers are published first. To quickly
get your articles reviewed, please refer
existing articles, their formatting style,
coding style, and try to make you are close
to them. In case you are a beginner, you may
refer Guidelines to write an Article.
</div>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, use overflow:auto; para hacer que «div» se pueda desplazar vertical y horizontalmente.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<style>
body {
/* disabling body scrolling */
overflow: hidden;
margin: auto;
background: white;
margin-top: 4%;
text-align: center;
}
h1 {
color: Green;
}
.scroll {
/* enable div scrolling */
overflow: auto;
height: 8%;
background-color: aqua;
border: 1px black solid;
padding: 2%;
width: 300px;
margin: 0 auto;
white-space: nowrap;
font-size: large;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>
Making content area scrollable
instead of the page
</h2>
<div class="scroll">
It is a good platform to learn programming.
It is an educational website. Prepare for
the Recruitment drive of product based
companies like Microsoft, Amazon, Adobe etc
with a free online placement preparation
course. The course focuses on various MCQ
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful. Also, any
geeks can help other geeks by writing
articles on the GeeksforGeeks, publishing
articles follow few steps that are<br>
Articles that need little modification or
improvement from reviewers are published
first. To quickly get your articles reviewed,
please refer existing articles, their
formatting style, coding style, and try to
make you are close to them. In case you are
a beginner, you may refer Guidelines to write
an Article. It is a good platform to learn
programming. It is an educational website.
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with<br> a free online placement preparation
course. The course focuses on various MCQ's &
Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful. Also, any
geeks can help other geeks by<br> writing
articles on the GeeksforGeeks, publishing
articles follow few steps that are Articles
that need little modification or improvement
from reviewers are published first. To quickly
get your articles reviewed, please refer
existing articles, their formatting style,
coding style, and try to make you are close
to them. In case you are a beginner, you may
refer Guidelines to write an Article.
</div>
</body>
</html>
Producción:
Nota: solo puede habilitar el desplazamiento vertical configurando overflow-y en scroll y auto y overflow-x en hidden .
De manera similar, para el desplazamiento horizontal, establezca overflow-x en scroll o auto y overflow-y en hidden .
Ejemplo 3: este ejemplo se usa solo para el desplazamiento vertical del área de contenido.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<style>
body {
overflow: hidden;
margin: auto;
background: white;
margin-top: 4%;
text-align: center;
}
h1 {
color: Green;
}
.scroll {
overflow-y: auto;
overflow-x: hidden;
height: 50%;
background-color: aqua;
border: 1px black solid;
padding: 2%;
width: 500px;
margin: 0 auto;
font-size: large;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>
Making content area scrollable
instead of the page
</h2>
<div class="scroll">
It is a good platform to learn programming.
It is an educational website. Prepare for
the Recruitment drive of product based
companies like Microsoft, Amazon, Adobe etc
with a free online placement preparation
course. The course focuses on various MCQ
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful. Also, any
geeks can help other geeks by writing
articles on the GeeksforGeeks, publishing
articles follow few steps that are<br>
Articles that need little modification or
improvement from reviewers are published
first. To quickly get your articles reviewed,
please refer existing articles, their
formatting style, coding style, and try to
make you are close to them. In case you are
a beginner, you may refer Guidelines to write
an Article. It is a good platform to learn
programming. It is an educational website.
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with<br> a free online placement preparation
course. The course focuses on various MCQ's &
Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful. Also, any
geeks can help other geeks by<br> writing
articles on the GeeksforGeeks, publishing
articles follow few steps that are Articles
that need little modification or improvement
from reviewers are published first. To quickly
get your articles reviewed, please refer
existing articles, their formatting style,
coding style, and try to make you are close
to them. In case you are a beginner, you may
refer Guidelines to write an Article.
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por chetankhanna767 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA