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

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 >
      <div >
        <h6 >/ Introduction</h6>
        <h2 >Accelerating Global Brands — Years ahead.</h2>
        <p >We are a world—class team of industry—leading professionals, who constantly push new technology to its limits.</p>

      </div>
    </div>

CodePudding user response：

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;
})

CodePudding user response：

From what I understand, you want increasing the width of your 'about' section when scrolling down, right? If yes, I applied an event on the body (or parent element) of scroll and checked using just the window scrollY, but probably in your context it's different. Here's the example:

let body = document.body;

body.onscroll = (ev) => {
  const target = body; // here is ev.target
  const about = target.querySelector('.about');
  const width = window.scrollY ? '100%' : '50%';

  return about.style.width = width; // better: you can add class on about section and edit style according to this classname on css
}

.about {
    overflow: hidden;
    z-index: 2;
    width: 50%;
    height: 100vh;
    display: flex;
    padding: 30px 0;
    margin: 0 auto;
    background: url('https://www.quickanddirtytips.com/wp-content/uploads/2022/04/grammar-devotional.jpg') no-repeat;
    transition: width .5s;
}

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