使用javascript获取精确的滚动位置

我有两个容器，我正试图劫持scroll事件，并使用translate来移动它们。第一个包装整个页面，第二个水平滚动

问题是我在滚动时无法获得确切的滚动位置。这导致水平滚动部分在向上滚动时永远不会返回到0位置

我意识到这可能是浏览器没有返回滚动条点击的所有值

我的问题是，在回滚时，如何将水平滚动容器的值返回到0？这些值可能会有很大的偏差。当快速滚动时，它可能会关闭100px，这是不可接受的

在下面的演示中，我正在控制台中记录

updateSection（）

函数中的滚动值。这是一个简单的函数，用于检查剖面是否位于视口顶部，然后启动水平滚动。从日志中可以清楚地看到，当向上滚动时，translate值永远不会回到0

有没有一个很好的方法来处理这个问题？我如何获得所需的确切数字

这是一把小提琴

这里是一个片段

const ScrollEase=opts=>{
const scrollContainer=document.querySelector（opts.container）；
常量间隔符=document.querySelector（opts.spacer）；
const containerOffset=opts.containerOffset | | |“0px”；
让yScroll=window.scrollY | | window.pageYOffset；
/**
* ---------------------------------------------------------------
*造型功能
* ---------------------------------------------------------------
*/
const setTransform=（el，transform）=>{
el.style.transform=变换；
el.style.webkitttransform=转换；
};
常量setspacestyle=（）=>{
const containerHeight=scrollContainer.getBoundingClientRect（）.height；
容器高度=容器高度；
间隔棒.style.height=高度+px；
间隔条.style.width='1px'；
spacer.style.position='相对'；
};
常量setContainerStyle=（）=>{
const top=容器偏移量；
scrollContainer.style.position='fixed'；
scrollContainer.style.top=top；
scrollContainer.style.left=0；
scrollContainer.style.zIndex=2；
scrollContainer.style.width='100%'；
};
/**
* ---------------------------------------------------------------
*设置容器函数的动画
* ---------------------------------------------------------------
*/
常量更新滚动=（）=>{
yScroll=window.scrollY | | window.pageYOffset；
setTransform（scrollContainer，'translateY（'+-yScroll++'px'）；
updateSection（）；
};
const updateSection=（）=>{
const el=document.querySelector（'[data type=“scroll”]'）；
const rect=el.getBoundingClientRect（）；
const bodyTop=document.body.getBoundingClientRect（）.top；
const offset=rect.top-bodyTop；
如果（矩形顶部<0）{
console.log（yScroll-offset）；
setTransform（el，'translateX（+-（yScroll-offset）+'px'）；
}
};
window.addEventListener（'scroll'，updateScroll）；
setContainerStyle（）；
setSpacerStyle（）；
};
卷轴({
容器：'.scrollContainer'，
间隔符：'.scrollSpacer'
});
[数据类型='scroll']{
高度：50vh；
宽度：200vw；
显示器：flex；
}
[数据类型='scroll'].框{
弹性：1；
背景：rgb（200200）；
保证金：2rem
}
页脚{
填充：100px 10px；
文本对齐：居中；
背景：蓝色；
颜色：白色；
}

向下滚动
页脚