按不同的数量翻译列以在屏幕底部结束排列

Question

我有 3 列。他们都是不同的高度。向下滚动时，我希望每一列以不同的速度平移，这样当底部全部对齐到视口的底部边缘时它们就会结束滚动。

注意：最长的一列应该不需要任何翻译，它可以正常滚动。较短的列需要转换以在底部与它相接。

看到my crude drawing for some dimensions我一直在这里玩。我通过猜测浏览器中的数字得出了每一列的粗略答案。我只需要公式，这样我就可以做出响应。

这里是a design mockup video。我不能假设列部分将始终位于页面顶部。

我在这里构建了一个基本的演示： https://codepen.io/drewbaker/pen/LYzMzJL

function setTranslate(sTop) {   
  Array.from(cols).forEach((el, index)=>{
    const colHeight = el.offsetHeight
    const diff = longestCol - colHeight
    const ratio = longestCol / diff  
    
    el.style.transform = `translateY(${sTop / ratio}px)`
  })
}

这是我所能得到的最接近的结果，但所有列都排在屏幕顶部，而它们本应排在屏幕底部。

我认为我的数学知识已经用完了。我怀疑我在某处缺少一个 window 高度变量。

Answer 1

老同事 Luke Waldner 帮我解决了这个问题！你可以在这里看到它： https://codepen.io/lwaldner/pen/KKXboog

  Array.from(cols).forEach((el, index)=>{
    const colHeight = el.offsetHeight
    const heightDiff = tallestCol - colHeight
    const ratio = heightDiff / (tallestCol - window.innerHeight)
    const transformAmt = sTop * ratio
    
    el.style.transform = `translateY(${transformAmt}px)`
  })

按不同的数量翻译列以在屏幕底部结束排列

Translate columns by different amounts to line up ending at bottom of screen

css

math

parallax

translate