Q: Squeeze first element in a scroll view I would like to achieve the effect shown in the screen shot (i.e. when scrolling, the first visible <div> in the scroll view squeezes before showing the next one, and disappears after the following one reaches its place), preferably without JavaScript, but I did not find many useful information about this on the Internet. Is there a way to achieve it?


A: 


squeeze({
  /* in the target, you need to add the selector */
  target: document.querySelector('#container>div:nth-child(1)')
})

/* this is a reusable function */
function squeeze(options) {
  window.addEventListener('scroll', squeezeFunction);

  function squeezeFunction() {
    let heightElement = options.target.offsetHeight;
    let scrollPosition = window.pageYOffset;

    /* after that the height is 0, 
    the div disappear,
    and the eventlistener is removed */
    if (heightElement <= 0) {
      options.target.style.display = 'none';
      window.removeEventListener('scroll', squeezeFunction);
    } else {
      /* every pixel scrolled, we decreased from the div */
      options.target.style.height = `${heightElement - scrollPosition}px`;
    }
  }
}
* {
  box-sizing: border-box;
}

#container {
  display: grid;
  /* creating a margin between elements */
  gap: 1rem;
}

#container>div {
  background: grey;
  /* only debugging purposes */
  height: 30rem;
}


/* the most important thing */
/* this make the element visible also after the scrolling */
/* and is better than "fixed" position, because this solution is in the normal flow of the page */

#container>div:nth-child(1) {
  position: sticky;
  top: 0;
}
<body style="margin: 0;">
  <div id="container">
    <div>div1</div><!-- the trick only happening to the first one -->
    <div>div2</div>
    <div>div3</div>
  </div>
</body>


