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>
scroll
comienza en 0%, no va a existir scrollscroll
debe actuar como un lienza elástico al hacer scroll (porque su contenido es poco mas extenso que su padre), pero su padre debe seroverflow:hidden
logicamente. Cuando sea el scroll, el hijo se extienda hasta el 100% y a partir de los 100%, actue su propio scroll100vh
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%