Dado un documento HTML, la tarea es identificar si un elemento en particular tiene barras de desplazamiento o no. Hay dos enfoques para resolver este problema que se discuten a continuación:
Enfoque 1:
- Seleccione el elemento en particular.
- Obtenga la propiedad element.scrollWidth y .clientWidth para la barra de desplazamiento horizontal.
- Calcule scrollWidth>clientWidth .
- Si el valor se cumple, entonces la barra de desplazamiento horizontal está presente; de lo contrario, no.
- Realice el mismo proceso para verificar la barra de desplazamiento vertical.
Ejemplo 1: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE HTML>
<html>
<head>
<title>
Check whether HTML element has
scrollbars using JavaScript
</title>
<style>
#div {
width:200px;
height:150px;
overflow:auto;
text-align:justify;
}
#GFG {
font-size: 24px;
font-weight: bold;
color: green;
}
</style>
</head>
<body>
<center>
<h1 style = "color:green;" >
GeeksforGeeks
</h1>
<h3>
Click on the button to check
for the scrollBars
</h3>
<div id="div">
This course is for all those people who want to
learn Data Structures and Algorithm from basic
to advance level. We don't expect you to have
any prior knowledge on Data Structure and
Algorithm, but a basic prior knowledge of any
programming language ( C++ / Java) will be
helpful. This course gives you the flexibility
of learning, under this program you can study
your course whenever you feel like, you need
not hurry or puzzle yourself.
</div>
<br>
<button onclick = "GFG_Fun()">
Click Here!
</button>
<div id = "GFG"></div>
<script>
function GFG_Fun() {
var div = document.getElementById('div');
var hs = div.scrollWidth > div.clientWidth;
var vs = div.scrollHeight > div.clientHeight;
document.getElementById('GFG').innerHTML
= "Horizontal Scrollbar - " + hs
+"<br>Vertical Scrollbar - " + vs;
}
</script>
</center>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Enfoque 2:
- Seleccione el elemento en particular.
- Utilice las propiedades scrollTop y scrollLeft .
- Si son mayores que 0, las barras de desplazamiento están presentes.
- Si estos son 0, primero configúrelos en 1 y vuelva a probar para saber si obtiene un resultado de 1.
- Finalmente, vuélvelos a poner en 0.
Ejemplo 2: Este ejemplo utiliza el enfoque discutido anteriormente.
<!DOCTYPE HTML>
<html>
<head>
<title>
Check whether HTML element has
scrollbars using JavaScript
</title>
<style>
#div {
width:200px;
height:200px;
overflow:none;
text-align:justify;
}
#GFG {
font-size: 24px;
font-weight: bold;
color: green;
}
</style>
</head>
<body>
<center>
<h1 style = "color:green;" >
GeeksforGeeks
</h1>
<h3>
Click on the button to check
for the scrollBars
</h3>
<div id="div">
This course is for all those people who want to
learn Data Structures and Algorithm from basic
to advance level. We don't expect you to have
any prior knowledge on Data Structure and
Algorithm, but a basic prior knowledge of any
programming language ( C++ / Java) will be
helpful.
</div>
<br>
<button onclick = "GFG_Fun()">
Click Here!
</button>
<div id = "GFG"></div>
<script>
function checkScrollBar(element, dir) {
dir = (dir === 'vertical') ?
'scrollTop' : 'scrollLeft';
var res = !! element[dir];
if (!res) {
element[dir] = 1;
res = !!element[dir];
element[dir] = 0;
}
return res;
}
function GFG_Fun() {
var div = document.getElementById('div');
var hs = checkScrollBar(div, 'horizontal');
var vs = checkScrollBar(div, 'vertical');
document.getElementById('GFG').innerHTML
= "Horizontal Scrollbar - " + hs
+"<br>Vertical Scrollbar - " + vs;
}
</script>
</center>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA