La propiedad DOM scrollLeft se utiliza para devolver o establecer el número de píxeles de un elemento, es decir, desplazado horizontalmente. Si el contenido del elemento no genera una barra de desplazamiento, su valor scrollLeft es 0;
Sintaxis:
- Devuelve la propiedad scrollLeft.
element.scrollLeft
- Se utiliza para establecer la propiedad scrollLeft.
element.scrollLeft = value
Donde valor especifica el número de píxeles que el contenido del elemento se desplaza horizontalmente.
Nota:
- Su valor no puede ser negativo.
- Si el valor especificado es mayor que la cantidad máxima de desplazamiento, entonces el valor se establece en el número máximo.
Ejemplo 1:
html
<html>
<head>
<title>HTML DOM scrollLeft Property</title>
<style>
#div {
width: 400px;
overflow: auto;
margin: auto;
}
#ele {
width: 600px;
background-color: green;
color: white;
}
</style>
</head>
<body style="text-align: center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
DOM scrollLeft Property
</h2>
<div id="div" onscroll="Geeks()">
<div id="ele">
<p>GeeksforGeeks</p>
<p>A computer science portal for geeks.</p>
</div>
</div>
<p id="p"></p>
<script>
function Geeks() {
var doc = document.getElementById("div");
var x = doc.scrollLeft;
document.getElementById("p").innerHTML =
"Horizontal scroll: " + x + "px";
}
</script>
</body>
</html>
Producción:
Antes de desplazarse:
Después de desplazarse:
Ejemplo-2:
html
<html>
<head>
<title>HTML DOM scrollLeft Property</title>
<style>
#div {
height: 100px;
width: 250px;
overflow: auto;
margin: auto;
}
#ele {
height: 300px;
Width: 400;
background-color: green;
color: white;
}
</style>
</head>
<body style="text-align: center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
DOM scrollLeft Property
</h2>
<button onclick="Geeks()">Scroll Div</button>
<br>
<br>
<div id="div" onscroll="Geeks()">
<div id="ele">
<p>GeeksforGeeks</p>
<p>A computer science portal for geeks.</p>
</div>
</div>
<script>
function Geeks() {
var elmnt = document.getElementById("div");
elmnt.scrollLeft = 50;
}
</script>
</body>
</html>
Producción:
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 scrollLeft se enumeran a continuación:
- Google cromo 1
- Borde 12
- explorador de Internet 5
- Firefox 1
- Ópera 8
- Safari 1
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA