jQuery scrollLeft(): Obtener y establecer la posición horizontal del scroll

Nuevo post para repasar la función de jQuery scrollLeft(), su funcionalidad es la de obtener o establecer la posición horizontal del scroll dentro de un elemento o div.

Para establecer u obtener la posición vertical tenemos que usar scrollLeft(). Otros post de jQuery interesantes son:

• append()
• each()
• position() y offset()
• height() y width()
• blur() y focus()
• Obtener y establecer la posición vertical y horizontal del scroll con jQuery

Sintaxis de jQuery scrollLeft()

Veamos la sintaxis extraída de su web oficial:

$(selector).scrollLeft()

Con la sintaxis superior estaríamos obteniendo la posición del scroll en un determindado elemento. Dicho elemento lo establecemos en el parámetro ‘selector‘.

$(selector).scrollLeft(position)

Con esta otra sintaxis establecemos la posición horizontal del scroll en el parámetro ‘position‘ dentro de un determinado elemento. Dicho elemento lo establecemos en el parámetro ‘selector‘.

Ejemplo de jQuery scrollLeft()

Vayamos con este ejemplo de scrollLeft() para obtener la posición horizontal del scroll:

$(document).ready(function(){
   $("#boton").click(function(){
        alert("La barra horizontal se ha movido " + $("#parrafo").scrollLeft() + " pixels");
    });
});

Os explico el ejemplo superior, detectamos el click en el botón con id = botón, acto seguido mostramos un mensaje por pantalla con la función alert de Java Script. En dicho mensaje mostramos los píxeles que se ha desplazado desde la izquierda el scroll/barra horizontal.

En este nuevo ejemplo de scrollLeft() vamos a establecer la posición horizontal del scroll:

$(document).ready(function(){
   $("#boton").click(function(){
        $("#parrafo").scrollLeft(50)
    });
});

Os explico el ejemplo superior, detectamos el click en el botón con id = botón, acto seguido movemos el scrollbar horizontalmente 50 pixels.

El código HTML del párrafo es el siguiente:

<div id="parrafo" style="border:1px solid; width:300px;height:250px; overflow:auto">
 Este es el texto del párrafo palabras unidas ParaGenerarScrollHorizontalYVerticalParaEstaDemoDeEjemplo. Este es el texto del párrafo palabras unidas ParaGenerarScrollHorizontalYVerticalParaEstaDemoDeEjemplo. Este es el texto del párrafo palabras unidas ParaGenerarScrollHorizontalYVerticalParaEstaDemoDeEjemplo. Este es el texto del párrafo palabras unidas ParaGenerarScrollHorizontalYVerticalParaEstaDemoDeEjemplo. Este es el texto del párrafo palabras unidas ParaGenerarScrollHorizontalYVerticalParaEstaDemoDeEjemplo. Este es el texto del párrafo palabras unidas ParaGenerarScrollHorizontalYVerticalParaEstaDemoDeEjemplo. 
</div>