El método scrollLeft() es un método incorporado en jQuery que se utiliza para devolver o establecer la posición horizontal de la barra de desplazamiento.
Sintaxis:
$(selector).scrollLeft(position)
Parámetros: este método acepta la posición de un solo parámetro , que es opcional. Se utiliza para especificar la posición de la barra de desplazamiento horizontal en píxeles.
Valor devuelto: este método devuelve la posición de la barra de desplazamiento.
El siguiente ejemplo ilustra el método scrollLeft() en jQuery.
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>scrollLeft method</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery code to show the working of this method -->
<script>
$(document).ready(function() {
$("button").click(function() {
alert($("div").scrollLeft() + " px");
});
});
</script>
<style>
div {
border: 1px solid black;
width: 140px;
height: 120px;
overflow: auto
}
</style>
</head>
<body>
<div>
welcome to GeeksforGeeks!. Welcome to GeeksforGeeks1.welcome
to GeeksforGeeks!. Welcome to GeeksforGeeks1. Welcome to
GeeksforGeeks!. Welcome to GeeksforGeeks!.welcome to
GeeksforGeeks!. Welcome to GeeksforGeeks1. Welcome to GeeksforGeeks!.
</div>
<br>
<!-- click on this button to get the position of the scrollbar -->
<button>Click Here!</button>
</body>
</html>
Salida:
Antes de hacer clic en el botón: 
Posición devuelta mostrada por la flecha:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>scrollLeft method</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery code to show the working of this method -->
<script>
$(document).ready(function() {
$("button").click(function() {
$("div").scrollLeft(100);
});
});
</script>
<style>
div {
border: 1px solid black;
width: 140px;
height: 120px;
overflow: auto
}
</style>
</head>
<body>
<div style="">
welcome to GeeksforGeeks!. Welcome to GeeksforGeeks1.welcome
to GeeksforGeeks!. Welcome to GeeksforGeeks1. Welcome to
GeeksforGeeks!. Welcome to GeeksforGeeks!.welcome to
GeeksforGeeks!. Welcome to GeeksforGeeks1. Welcome to
GeeksforGeeks!.
</div>
<br>
<!-- click on this button to get the position
of the scrollbar -->
<button>Click Here!</button>
</body>
</html>
Salida:
Antes de hacer clic en la posición del botón que muestra la flecha.
Después de hacer clic en la posición del botón que muestra la flecha.
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA