GSAP ScrollTrigger标记与滑块元素实际边界偏差问题求助

我正在用GSAP ScrollTrigger制作图片垂直滑块：设置id为scroller的隐藏元素高度为400vh，所有内容采用固定定位。滚动时通过ScrollTrigger控制#slider垂直移动，滑块元素进入指定区域时切换主背景。

驱动滑块动画的ScrollTrigger代码 #

gsap.to('#slider',{
        scrollTrigger:{
            trigger: "#scroller",
            start: 0,
            scrub: 1,
            snap:"labelsDirectional"
        },
        y:-sliderH*6-80,
    })

切换背景的ScrollTrigger批量处理代码 #

let elems=document.querySelectorAll('.slider-elem')
let heroBacks=document.querySelectorAll('.hero-back')
elems=Array.from(elems)
ScrollTrigger.batch(elems, {
    onLeave: (elements, triggers) => {
        gsap.to(heroBacks[heroBacks.length-elems.indexOf(elements[0])-1], { opacity: 0})
    },
    onEnterBack: (elements, triggers) => {
        x=gsap.to(heroBacks[heroBacks.length-elems.indexOf(elements[0])-1], { opacity: 1})
        console.log(x)
    },
    start:'top 60%',
    end:'bottom 10%',
    markers:true
});

滚动时整体功能正常，但滑块元素的实际边界（顶部、底部）与标记显示的边界存在偏差，相关截图如下：

• 无偏差状态：
• 存在偏差状态：

内容的提问来源于stack exchange，提问作者Sohaib Krim