Javascript 如何计算元素'；s缩放和平移值以使点停留在光标所在的位置？

目标是通过滚动放大/缩小视图，但“原点”是光标所在的位置

想象一条线（不是盒子，更容易想象和计算），里面有数字。如果你把光标放在一个数字上，如果你滚动，它总是在窗口的中心

我的最佳尝试示例如下：

window.addEventListener（'mousemove'，e=>{
常数{x}=e；
const mouseX=document.getElementById（'mouseX'）；
mouseX.style.transform=`translateX（${x}px）`
const mouseXIndicator=document.getElementById（'x'）；
mouseXIndicator.innerText=x；
})
设标度=1；
设translateX=0；
window.addEventListener（'wheel'，e=>{
常数{deltaY，x}=e；
const leftIndicator=document.getElementById（'left'）；
const widthIndicator=document.getElementById（'width'）；
const translateXIndicator=document.getElementById（'translateX'）；
const line=document.querySelector（'.line'）；
比例=比例-三角洲/1000；
const left=line.offsetLeft*比例；
常数宽度=线偏移网络宽度*比例；
translateX=-（x-左-（宽度/2））/比例；
leftIndicator.innerText=左；
widthIndicator.innerText=宽度；
translateXIndicator.innerText=translateX；
line.style.transform=`translateX（${translateX}px）scale（${scale}）`；
})

*{
保证金：0；
用户选择：无；
}
div{
显示器：flex；
}
.集装箱{
宽度：100vw；
高度：100vh；
证明内容：中心；
对齐项目：居中；
}
.线路{
背景色：白烟；
边框：1px实心；
宽度：100%；
证明内容：周围的空间；
}
.指标{
位置：绝对位置；
排名：0；
左：0；
弯曲方向：柱
}
#摩丝{
身高：100%；
宽度：1px；
位置：绝对位置；
左：0；
排名：0；
背景色：红色；
不透明度：0.5；
}

鼠标：
左：
宽度：
translateX：
1.
2.
3.
4.