0

Quiero que la función que tengo haga el scroll mostrando caja por caja con la misma clase y no como lo hace normalmente moviendo el scroll sin importar que caja muestre.

<button onclick="nextBox()">Adelante</button>
<button onclick="previousBox()">Atras</button>

<div id="scroll">
<div class="caja-por-caja"></div>
<div class="caja-por-caja"></div>
<div class="caja-por-caja"></div>
</div>

<style>
#scroll{
overflow: auto;
}
</style>

<script>
function nextBox(){
document.getElementById('scroll').scrollLeft = 100;
}
function previousBox(){
document.getElementById('scroll').scrollLeft = -100;
}
</script>
1
  • En css dentro de la clase caja-por-caja puede agregar overflow: scroll;
    – user101604
    Commented el 1 abr. 2019 a las 3:26

1 respuesta 1

2

No creo que haga falta utilizar javascrip o jquery. Simplemente desde css puede utilizar la propiedad overflow: scroll.

Aqui te dejo un simple ejemplo.

En mi caso utilice overflow-y: scroll; que especifica qué hacer con los bordes superior e inferior del contenido cuando hay un desborde en el div.

Puede leer un poco mas en w3schools si lo deseas o buscar mas info en google.

.caja-por-caja {
width: 200px;
height: 100px;
overflow-y: scroll;
}
<div class="caja-por-caja">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<br>
<div class="caja-por-caja">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<br>
<div class="caja-por-caja">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

1
  • 1
    No creo que sea eso lo que quiere el OP. Suppongo que lo que quiere hacer es desplazarse de una caja a otra
    – user7176
    Commented el 1 abr. 2019 a las 11:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.