Dado un documento HTML y la tarea es obtener la altura de la barra de desplazamiento usando JavaScript. Los siguientes son los diferentes enfoques para resolver este problema que se discuten a continuación:
Enfoque 1: en este enfoque, se crea un elemento div que contiene una barra de desplazamiento. Para obtener la altura de la barra de desplazamiento, la altura de compensación de div se resta de la altura de cliente de div.
- OffsetHeight = Altura de un elemento + Altura de la barra de desplazamiento.
- ClientHeight = Altura de un elemento.
- Altura de la barra de desplazamiento = offsetHeight – clientHeight.
Ejemplo: Este ejemplo implementa el enfoque anterior.
HTML
<!DOCTYPE HTML>
<html>
<head>
<style>
h1 {
color:green;
}
#geek1 {
width: 300px;
overflow-y:hidden;
border:1px solid black;
white-space: nowrap;
}
#geek2 {
font-size: 20px;
font-weight: bold;
}
#geek4 {
font-size: 24px;
font-weight: bold;
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<p id = "geek2"></p>
<div id="geek1">
Bokeh is a Python interactive data
visualization. It renders its plots
using HTML and JavaScript.
</div>
<br>
<button onclick = "geek3()">
Click Here
</button>
<p id = "geek4"></p>
<script>
var element = document.getElementById('geek1');
var el_up = document.getElementById('geek2');
var el_down = document.getElementById('geek4');
el_up.innerHTML = "To get "
+ "the height of the scrollbar.";
function geek3() {
el_down.innerHTML = element.offsetHeight
- element.clientHeight + "px";
}
</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: en este enfoque, se crea un elemento div externo y en este elemento div externo, también se crea un elemento div interno. Para obtener la altura de la barra de desplazamiento, la altura del div interno se resta del div externo.
Ejemplo 2: Este ejemplo implementa el enfoque anterior.
HTML
<!DOCTYPE HTML>
<html>
<head>
<style>
h1 {
color:green;
}
#geek1 {
width: 300px;
overflow-y:hidden;
border:1px solid black;
white-space: nowrap;
}
#geek2 {
font-size: 20px;
font-weight: bold;
}
#geek4 {
font-size: 24px;
font-weight: bold;
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<p id = "geek2"></p>
<div id="geek1">
<div id="geek5">
Bokeh is a Python interactive data
visualization. It renders its plots
using HTML and JavaScript.
</div>
</div>
<br>
<button onclick = "geek3()">
Click Here
</button>
<p id = "geek4"></p>
<script>
var element = document.getElementById('geek1');
var el_up = document.getElementById('geek2');
var el_down = document.getElementById('geek4');
el_up.innerHTML = "To get "
+ "the height of the scrollbar.";
function geek3() {
var child = document.querySelector("#geek5");
var scroll = child.parentNode.offsetHeight
- child.offsetHeight;
el_down.innerHTML = scroll + "px";
}
</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 SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA