0

Actualmente tengo una aplicación One-Page en HTML CSS y JS, esta no tiene scroll vertical pero contiene un <div></div> que permite contener varios elementos de manera horizontal, programé una barra para lograr realizar el efecto de scroll horizontal, pero al momento de realizar el desplazamiento con la rueda del mouse éste no se activa si no se oprime simultáneamente shift-bloqMayus.

¿Hay alguna forma de programar este efecto con la rueda del mouse sin necesidad de tener presionada estas teclas?

Dejo mi codigo CSS

 .contenedor-indicadores{
    border-bottom: 1px solid #11101d;
    width: 95%;
    height: auto;
    padding: 20px;
    padding-bottom: 40px;
    margin-left: auto;
    margin-right: auto;

    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto;
    
    overflow-x: scroll;
    overflow-y: hidden;
}

.contenedor-indicadores::-webkit-scrollbar {
    width: 2px;
    height: 5px;
}

.contenedor-indicadores::-webkit-scrollbar-thumb {
    background: #212529;
    border-radius: 10px;
}
0

1 respuesta 1

0

Lo puedes hacer de la siguiente manera:

@import url(https://fonts.googleapis.com/css?family=Source+Serif+Pro);
*, *:before, *:after {
  margin: 0;
  padding: 0;
  position: relative;
  box-sizing: inherit;
}
html {
  background: #eee;
    background-attachment: fixed;
  height: 100%;
  box-sizing: border-box;
  font-family: 'Source Serif Pro', serif;
  color: #000;
  overflow: hidden;
}

.horizontal-parent {
  position: absolute;
  top: -1rem;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.horizontal-child {
  position: relative;
  display: block;
  width: 100vh;
  height: 100vw;
  overflow: scroll;
  transform-origin: 100% 0%;
  transform: rotate(-90deg) translateY(-100vh);
}
.horizontal-child .slide {
  width: 100vw;
  height: calc(100vh - 2rem);
  padding: 3rem 1rem 2rem;
  transform-origin: 0% 0%;
  column-width: 350px;
  column-gap: 0;
  font-size: 1.3rem;
  transform: rotate(90deg) translateY(-100%);
}
p {
  text-align: center;
  white-space: pre;
  padding-bottom: 1.5rem;
}

html::after {
  content:'';
  border-left: 1rem solid #000;  content:'';
  border-right: 1rem solid #000;
  position: fixed;
  top: -5rem;
  bottom: -5rem;
  left:0;
  right: 0;
  pointer-events: none;
}

code {
  display: block;
  line-height: 2;
  background: tomato;
  color: #fff;
}
<html>
  <body>
  <div class="horizontal-parent">  
    <div class="horizontal-child">  
      <div class="slide">
          <p>Use the mouse wheel or keyboard</p>        
          <p>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</p>
      </div>
    </div>
  </div>
  </body>
</html>

Te dejo el link de donde lo he sacado aqui

1
  • Perfecto! ¿Existe alguna forma de desarrollar el efecto en JavaScript sin tener que simularlo? el 18 ene. 2022 a las 14:17

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.