scrollleft - scroll vertical and horizontal jquery

jQuery scrollRight?

Question

Tengo el siguiente código que parece desplazar un div en el clic hacia la izquierda. Me pregunto si:

1. hay una forma de hacerlo para que se desplace solo 200px a la vez.
2. Puedo hacer que se desplace hacia la derecha también. Intenté mirar la documentación de jQuery pero no pude encontrar la función scrollToRight.

Aquí está mi código:

$(".leftArrow").click(function () { 
  $(".innerWrapper").animate({scrollLeft: 250}, 800);
});

.innerWrapper
{
 float: left;
 margin-right:-32767px;
}
.outerWrapper
{
 width: 780px;
 height: 180px;
 overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type=''button'' class=''leftArrow'' value=''left''>
<input type=''button'' class=''rightArrow'' value=''right''>

<div class=''outerWrapper''>
   <div class=''innerWrapper''>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </div>
</div>

Cualquier ayuda sería muy apreciada.

Answer 1

Encontré esta solución sin animación:

$("#rightArrow").click(function () { 
   $(''#outerWrapper'').scrollLeft($(''#outerWrapper'').scrollLeft() + 20);
});

Espero eso ayude.

Answer 2

scrollLeft IS scrollRight. Más o menos Todo lo que hace es establecer la cantidad de desplazamiento horizontal. Si lo configura en cero, entonces quedará todo el camino. Si lo configura en algo mayor que cero, ¡se moverá hacia la derecha!

En cuanto a hacerlo ir en incrementos, debería obtener la distancia actual scrollLeft y luego restar 200.

$(".leftArrow").click(function () { 
  var leftPos = $(''.innerWrapper'').scrollLeft();
  $(".innerWrapper").animate({scrollLeft: leftPos - 200}, 800);
});

$(".rightArrow").click(function () { 
  var leftPos = $(''.innerWrapper'').scrollLeft();
  $(".innerWrapper").animate({scrollLeft: leftPos + 200}, 800);
});

Answer 3

utilice la siguiente secuencia de comandos similar .. DEMO

 <script type="text/javascript">
        $(window).load(function() {
            $("div#makeMeScrollable").smoothDivScroll({ 
                autoScroll: "onstart" , 
                autoScrollDirection: "backandforth", 
                autoScrollStep: 1, 
                autoScrollInterval: 15, 
                startAtElementId: "startAtMe", 
                visibleHotSpots: "always"
            });
        });
    </script>


<div id="makeMeScrollable">
    <div class="scrollingHotSpotLeft"></div>
    <div class="scrollingHotSpotRight"></div>
    <div class="scrollWrapper">
        <div class="scrollableArea">
            <img src="images/demo/field.jpg" alt="Demo image" />
            <img src="images/demo/gnome.jpg" alt="Demo image" />
            <img src="images/demo/pencils.jpg" alt="Demo image" />
            <img src="images/demo/golf.jpg" alt="Demo image" id="startAtMe" />
            <img src="images/demo/river.jpg" alt="Demo image" />
            <img src="images/demo/train.jpg" alt="Demo image" />
            <img src="images/demo/leaf.jpg" alt="Demo image" />
            <img src="images/demo/dog.jpg" alt="Demo image" />
        </div>
    </div>
</div

Answer 4

$(''.leftArrow'').click(function(event){
    event.preventDefault();
    $(''.innerWrapper'').animate({scrollLeft:''+=1500''},500);
});

Simple como eso.