我有 3 列。他們都是不同的高度。在向下滾動時，我希望每列以不同的速度翻譯，這樣當底部全部對齊到視口的底部邊緣時，它們就會結束滾動。
注意：最長的一列不需要翻譯，可以正常滾動。較短的列需要平移才能在底部遇到它。
查看我在這里玩過的一些尺寸的粗略圖紙。我通過猜測瀏覽器中的數字來找出每一列的粗略答案。我只需要公式，以便我可以做出回應。
這是一個設計模型視頻。我不能假設列部分將始終位于頁面頂部。
我在這里建立了一個基本的演示： 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)`
})
}
這是我所能得到的最接近的，但是當它們應該在螢屏底部排列時，所有列都在螢屏的頂部排列。
我認為我的數學知識已經走到了盡頭。我懷疑我在某處缺少一個視窗高度變數。
uj5u.com熱心網友回復：
所以一位老同事 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)`
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/414610.html
標籤：
上一篇：函式中的“for回圈”