0

quiero crear un slider como este de youtube introducir la descripción de la imagen aquí

donde al hacer scroll sobre este, se desplaza en horizontal.

se que al dejar presionado la tecla shift en un campo scrolleable, el scroll cambiar su orientación a horizontal pero me gustaria hacerlo como ese menú de YouTube, que solo con dejar el mouse encima y hacer scroll es como si ya presionase la tecla shift.

1
  • 1
    Qué has intentado? Muéstranos algo de código por favor.
    – DjCrazy
    Commented el 1 jun. 2022 a las 22:45

1 respuesta 1

1

el secreto esta en

transform:rotate(90deg) translateY(80px);

::-webkit-scrollbar{width:2px;height:2px;}
::-webkit-scrollbar-button{width:2px;height:2px;}

div{
  box-sizing:border-box;
}

body {
  background: #111;
}

.horizontal-scroll-wrapper{
  position:absolute;
  display:block;
  top:0;
  left:0;
  width:80px;
  max-height:500px;
  margin:0;
  background:green;
  overflow-y:auto;
  overflow-x:hidden;
  transform:rotate(-90deg) translateY(-80px);
  transform-origin:right top;
}
.horizontal-scroll-wrapper > div{
  display:block;
  padding:5px;
  background:#cab;
  transform:rotate(90deg);
  transform-origin: right top;
}

.squares{
  padding:60px 0 0 0;
}

.squares > div{
  width:60px;
  height:60px;
  margin:10px;
}

.rectangles{
  top:100px;
  padding:100px 0 0 0;
}
.rectangles > div{
  width:140px;
  height:60px;
  margin:50px 10px;
  padding:5px;
  background:#cab;
  transform:rotate(90deg) translateY(80px);
  transform-origin: right top;
}
<div class="horizontal-scroll-wrapper squares">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  <div>item 5</div>
  <div>item 6</div>
  <div>item 7</div>
  <div>item 8</div>
  <div>item 9</div>
  <div>item 10</div>
  <div>item 11</div>
  <div>item 12</div>
  <div>item 13</div>
  <div>item 14</div>
  <div>item 15</div>
</div>

Mas detalles en: https://css-tricks.com/pure-css-horizontal-scrolling/

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.