0

I'm trying to change the size (or scale) of a div while scrolling. This div has a .8 scale attached to it css. I'd like to reach a scale of 1 progressively while scrolling. IntersectionObserver seems to be a good choice to work with instead of scroll event but i don't know if i can change the state of an element using it.

2 Answers 2

0

You can change the scale of a div using.

document.getElementById("scaledDiv").style.transform = "scale(1)";

The scroll event should do what you want it to do. You can continue to add more if statements and check how many pixels they are scrolling to change it gradually to 1 or even back to 0.8 when they scroll back up. The 50 below represents 50 pixels from the top of the page.

window.onscroll = function() {
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        // They are scrolling past a certain position

        document.getElementById("scaledDiv").style.transform = "scale(1)";

    } else {
        // They are scrolling back

    }
};

2
  • Thank you for your quick answer but i'm trying to make it change dynamically while scrolling
    – Biscuite
    Commented Oct 10, 2019 at 22:23
  • You can do that with the onscroll event. Add more if statements and check how far they have scrolled on the page. As they continue to scroll, you can gradually change the scale.
    – SamNewton
    Commented Oct 10, 2019 at 22:26
0

I hope this will help you:

const container = document.querySelector('.container');
const containerHeight = container.scrollHeight;
const iWillExpand = document.querySelector('.iWillExpand');

container.onscroll = function(e) {
  iWillExpand.style.transform = `scale(${0.8 + 0.2 * container.scrollTop / (containerHeight - 300)})`;
};
.container {
  height: 300px;
  width: 100%;
  overflow-y: scroll;
}
.scrollMe {
  height: 1500px;
  width: 100%;
}

.iWillExpand {
  position: fixed;
  width: 200px;
  height: 200px;
  top: 10px;
  left: 10px;
  background-color: aqua;
  transform: scale(0.8);
}
<div class='container'>
  <div class='scrollMe' />
  <div class='iWillExpand' />
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.