如何设置元素的高度以匹配缩放div的偏移速度？

Question

我试图设置元素的最大滚动(在本例中为.contain )，以匹配.square填充滚动条上整个视图端口(宽度和高度)所需的高度。我需要弄清楚如何检索覆盖滚动偏移值所需的剩余高度。

这是一个代码库，显示了当前发生的情况。滚动到底部，方块无法填充屏幕。没有偏移量，我可以让它完美地工作(参见第17行)，但我真的很想学习如何结合视差偏移量/速度效应。

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

非偏移版本，以显示上述笔应如何工作。当滚动条击中底部时，方块填充屏幕：https://codepen.io/anon/pen/Rdvvom

Answer 1

这应该能起作用

​

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>

​