0

Estoy intentando hacer un cambio (height) a un contenedor con respecto al scroll.

Cuando se haga scroll sobre el contenedor container, el contenido hijo scroll se vaya modificando gradualmente su altura a la par del scroll:

  • Si el scroll es hacia abajo (> 0), que divscroll sea hasta 100% de su
    contenedor padre.

  • Si se hace scroll hacia arriba (< 0), que divscroll vuelva hasta lo normal 50% que es su estado normal.

Lo que intente hacer es lo siguiente: el 5% se comporta como la suavidad del desplazamiento (por lo que debería ser la altura deseada como que quitando el puesto de 0.1),

if(scroll > scl) {
    h.style.height = "calc(5% * "+ scroll * 0.1 + ")";
} else {
    h.style.height = "calc(0% * "+ scroll * -0.1 + "))";
}

Mi estructura básica de lo que espero lograr con el código anterior, (o con un método diferente de comportamiento similar).

const h = document.getElementById("scroll");
const scl = 0;

window.addEventListener("scroll", () => {

  let posicion = window.pageYOffset || document.documentElement.scrollTop;
  let scroll = window.scrollY;

  if (scroll > scl) {

    h.style.height = "100%";

  } else {

    h.style.height = "calc(100% - 50%)";
  }

  scl = this.crollY;
});
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 1234px;
}

.container {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  overflow: hidden;
  width: 300px;
  height: 100vh;
  background-color: rgb(33 46 55)
}

.perfil {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
  margin: 25% auto;
  border-radius: 50%;
  background-color: #000
}

.perfil img {
  display: block;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover
}

.scroll {
  display: block;
  position: absolute;
  overflow-y: auto;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(50%);
  padding: 1rem;
  color: #000;
  background-color: rgb(33 46 55 / 0.5);
  backdrop-filter: blur(3px);
  transition: height 0.3s ease
}
<div class="container">

  <div class="perfil">
    <img src="https://picsum.photos/536/354">
  </div>

  <div class="scroll" id="scroll">
    <h4>Efecto scroll height</h4>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi dicta eius, vero incidunt laboriosam eaque illum sit ipsam voluptas earum maxime architecto cumque corrupti veritatis ex eos cupiditate tenetur. Ea, aspernatur tenetur. Unde incidunt consequuntur
      error earum qui tempore, vel, quasi veniam iure amet corporis eaque maiores nobis quidem laboriosam blanditiis dolore obcaecati commodi vero laborum ullam facilis ipsam quos non! Quae ipsum non consequuntur quia, animi quibusdam totam cumque dicta
      dolor voluptatibus rerum assumenda omnis ea voluptatum accusantium saepe quisquam tempore impedit dolorem officiis voluptate, perspiciatis eius. Debitis voluptatum ratione corporis accusamus repudiandae commodi. Soluta recusandae cum maiores repudiandae
      aliquam quia omnis iure laborum quas natus voluptas quae impedit est quos quasi voluptatem suscipit officiis, tempore alias porro repellendus harum. Labore dicta iusto ducimus alias deleniti excepturi unde magni, nihil veritatis. Eaque animi nisi
      repudiandae qui voluptatibus, suscipit aliquam atque in aspernatur natus. Iusto laboriosam ratione cum error maxime quam exercitationem impedit facilis perspiciatis? Perferendis quos sit accusamus laboriosam nulla officia vero, quas labore molestiae
      error? Voluptas, exercitationem asperiores! Asperiores quos ipsam illum perferendis harum ab, maxime enim in nostrum reiciendis repudiandae eius saepe a nihil culpa! Enim, doloremque! Quo distinctio mollitia voluptate provident fugiat minima numquam
      libero vero.
    </p>
  </div>

</div>

5
  • A mi no queda muy claro el efecto que esperas lograr, puedes explicarlo con otras palabras?
    – Yussef
    Commented el 10 ago. 2023 a las 0:53
  • Sobre todo, porque si el contenedor scroll comienza en 0%, no va a existir scroll
    – Yussef
    Commented el 10 ago. 2023 a las 0:54
  • El hijo scroll debe actuar como un lienza elástico al hacer scroll (porque su contenido es poco mas extenso que su padre), pero su padre debe ser overflow:hidden logicamente. Cuando sea el scroll, el hijo se extienda hasta el 100% y a partir de los 100%, actue su propio scroll Commented el 10 ago. 2023 a las 1:04
  • A ver si entiendo, hay un texto que ocupa el 50%, lo que tu quieres es que al hacer scroll vaya aumentando hasta llegar al 100%?
    – Yussef
    Commented el 10 ago. 2023 a las 1:08
  • si @Yussef. El padre es de maximo 100vh porque esta fijo y no quiero que tenga scroll. Entonces, el hijo entra en juego: porque el hijo tiene mas contenido. Por eso el uso de JS para que se extienda solamente hasta 100% y a partir de ahi, si que actue su propio scroll (no JS). El uso de JS es solo para que se ensanche a 100% o 50% Commented el 10 ago. 2023 a las 1:16

1 respuesta 1

0

Existe una nueva API para CSS que permite generar efectos a travez del scroll. Puedes ver más detalle en esta documentación, para esto creas una animación usando keyframes y lo nuevo es:

 animation-timeline: scroll();

Lo cual establece que el ciclo de la animación está ligado al scroll

Demo:

.container {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  overflow: hidden;
  width: 300px;
  height: 100vh;
  background-color: rgb(33 46 55)
}

.scroll {
  display: block;
  position: absolute;
  overflow-y: auto;
  left: 0;
  top:0;
  bottom: 0;
  width: 100%;
  height: 50%;
  padding: 1rem;
  color: #000;
  background-color: rgb(33 46 55 / 0.5);
  backdrop-filter: blur(3px);

  animation: scrollProgress auto linear;
  animation-timeline: scroll(self);
}


@keyframes scrollProgress {
  0% {
    height: 50%;
  }
  100% {
    height: 100%;
  }
}
<div class="container">
  <div class="scroll" id="scroll">
    <h4>Efecto scroll height</h4>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi dicta eius, vero incidunt laboriosam eaque illum sit ipsam voluptas earum maxime architecto cumque corrupti veritatis ex eos cupiditate tenetur. Ea, aspernatur tenetur. Unde incidunt consequuntur
      error earum qui tempore, vel, quasi veniam iure amet corporis eaque maiores nobis quidem laboriosam blanditiis dolore obcaecati commodi vero laborum ullam facilis ipsam quos non! Quae ipsum non consequuntur quia, animi quibusdam totam cumque dicta
      dolor voluptatibus rerum assumenda omnis ea voluptatum accusantium saepe quisquam tempore impedit dolorem officiis voluptate, perspiciatis eius. Debitis voluptatum ratione corporis accusamus repudiandae commodi. Soluta recusandae cum maiores repudiandae
      aliquam quia omnis iure laborum quas natus voluptas quae impedit est quos quasi voluptatem suscipit officiis, tempore alias porro repellendus harum. Labore dicta iusto ducimus alias deleniti excepturi unde magni, nihil veritatis. Eaque animi nisi
      repudiandae qui voluptatibus, suscipit aliquam atque in aspernatur natus. Iusto laboriosam ratione cum error maxime quam exercitationem impedit facilis perspiciatis? Perferendis quos sit accusamus laboriosam nulla officia vero, quas labore molestiae
      error? Voluptas, exercitationem asperiores! Asperiores quos ipsam illum perferendis harum ab, maxime enim in nostrum reiciendis repudiandae eius saepe a nihil culpa! Enim, doloremque! Quo distinctio mollitia voluptate provident fugiat minima numquam
      libero vero.
    </p>
    
  </div>

</div>

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.