Question

我试图设置元素的最大滚动度，在这种情况下为MethodError: no method matching zero(::Type{Tuple{Float64,Int64}})，以匹配.contain填充滚动时整个视口所需的高度（宽度和高度）。我需要弄清楚如何获取覆盖滚动的偏移值所需的剩余高度。

这是一个代码笔，显示当前发生的情况。滚动条到达底部，并且正方形无法填充屏幕。没有偏移，我可以使其完美工作（请参见第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>

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

1 个答案: