How can I make the width of an Element incease while scrolling?

Question

I tried to make the width of the div increase while scrolling down. Who know how to do this with pure JS?

.about {
    overflow: hidden;
    z-index: 2;
    width: 50%;
    height: 100vh;
    display: flex;
    padding: 10vw 0;
    margin: 0 auto;
    background: url('./img/pexels-alesia-kozik-5989895.jpg') no-repeat;
    transition: width .5s;
}

 <div class="about">
      <div class="container">
        <h6 class="font_caps">/ Introduction</h6>
        <h2 class="lead">Accelerating Global Brands — Years ahead.</h2>
        <p class="lead">We are a world—class team of industry—leading professionals, who constantly push new technology to its limits.</p>

      </div>
    </div>

Answer 1

First, you get access to the div with the about class.

let aboutDiv = document.querySelector(".about");

Next, you add a scroll event-listener to window, with a callback function.

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

});

You want the height of the div to increase only when scrolling down. So, in the callback function you add that restriction. Replace the previous code with:

let lastScroll = window.scrollY;
let inc = 1; //inc is the amount you wish to increment the div's height by

window.addEventListener("scroll", (e) => {
  if(window.scrollY - lastScroll > 0) {
    aboutDiv.style.height = `${aboutDiv.getBoundingClientRect().height + inc}px`
  }
  lastScroll = window.scrollY;
})

You can use the code below if you wish to increase the height of the div by the magnitude of the scroll change.

aboutDiv.style.height = `${aboutDiv.getBoundingClientRect().height + window.scrollY - lastScroll}px`

If you wish to decrease the height while scrolling up, add this too:

let dec = 1; //dec is the amount you wish to decrement the div's height by

window.addEventListener("scroll", (e) => {
  if(window.scrollY - lastScroll < 0) {
    aboutDiv.style.height = `${aboutDiv.getBoundingClientRect().height - dec}px`
  }
  lastScroll = window.scrollY;
})