Есть ли способ изменить размер div на прокрутке, используя intersectionObserver?

Question

Я пытаюсь изменить размер (или масштаб) элемента div при прокрутке. Этот div имеет шкалу .8, прикрепленную к нему css. Я хотел бы достичь масштаба 1 прогрессивно при прокрутке. IntersectionObserver, кажется, является хорошим выбором для работы вместо события прокрутки, но я не знаю, смогу ли я изменить состояние элемента, используя его.

Answer 1

Надеюсь, это вам поможет:

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>

Answer 2

Вы можете изменить масштаб деления, используя.

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

Событие прокрутки должно делать то, что вы хотите. Вы можете продолжать добавлять операторы if и проверять, сколько пикселей они прокручивают, чтобы постепенно изменить его на 1 или даже на 0,8 при прокрутке вверх. 50 ниже представляет 50 пикселей от верхней части страницы.

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

    }
};