Как установить высоту элемента, соответствующую скорости смещения масштабируемого элемента? - PullRequest
Новая
       7

Как установить высоту элемента, соответствующую скорости смещения масштабируемого элемента?

0 голосов
/ 24 марта 2019

Я пытаюсь установить максимальную прокрутку элемента, в данном случае .contain, чтобы соответствовать высоте, необходимой для .square, чтобы заполнить весь видовой экран (ширину и высоту) при прокрутке. Мне нужно выяснить, как я могу получить оставшуюся высоту, необходимую для покрытия значения смещения прокрутки.

Вот кодекс, показывающий, что происходит в данный момент. Свиток достигает дна и квадрат не заполняет экран. Без смещения я могу заставить это работать идеально (см. Строку 17), но мне бы очень хотелось узнать, как я могу включить эффект смещения / скорости параллакса.

https://codepen.io/anon/pen/zbeyQd

Версия без смещения, чтобы показать, как должна работать вышеуказанная ручка. Квадрат заполняет экран, когда полоса прокрутки достигает дна: https://codepen.io/anon/pen/Rdvvom

1 Ответ

1 голос
/ 24 марта 2019

Это должно сработать 

const sq = document.querySelector('.square')
const contain = document.querySelector('.contain')

//set desired scroll boundaries. can be any size
//the higher the value the longer you'll have to scroll
const scrollOffset = 250
const sqW = sq.offsetWidth
const sqH = sq.offsetHeight
const wHeight = window.innerHeight
const wWidth = window.innerWidth

contain.style.height = `${wHeight + scrollOffset}px`

window.addEventListener('scroll', (e) => {
  const percentScroll = window.scrollY * 100 / scrollOffset
  const width = (wWidth - sqW) * percentScroll / 100
  const height = (wHeight - sqH) * percentScroll / 100
  sq.style.width = `${sqW + width}px`
  sq.style.height = `${sqH + height}px`
})
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.contain {
  height: 100%;
  width: 100%;
  background-color: papayawhip;
}

.square {
  width: 100px;
  height: 100px;
  background-color: tomato;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.25;
}
<div class="contain">
    
  <div class="square"></div>

</div>
...