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

I have 3 columns. They are all different heights. On scroll down, I want each column to translate at different speeds, such that they end scrolling when the bottoms all line up to bottom edge of viewport.

Note: The longest column shouldn't need any translating, it can scroll normally. The shorter columns need to translate to meet it at the bottom.

See my crude drawing for some dimensions I've been playing with here. I figured out the rough answers for each column by guessing at the numbers in the browser. I just need the formula so that I can make this responsive.

Here is a design mockup video. I can't assume the columns section will always be at the top of the page.

I built a basic demo of it here: 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)`
  })
}

This is as close I've been able to get, but the columns all line up at TOP of the screen, when they should line up at bottom of screen.

I'm at the end of my math knowledge I think. I suspect I'm missing a window height variable in there somewhere.

CodePudding user response：

So an old colleague Luke Waldner helped me figure this out! You can see it here: 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)`
  })