Javascript 防止滚动条出现在transform上：使用React-Spring进行平移

每当我将

translate（）

CSS函数添加到

react-spring

useTransition

hook

from

或

leave

属性中元素将离开视口时，我都会得到一个垂直/水平滚动条

const transitions = useTransition(show, null, {
    from: {
        opacity: 0,
        transform: "translate3d(500px,0px,0px) scale(1)"
    },
    enter: {
        opacity: 1,
        transform: "translate3d(0px,0px,0px) scale(1)"
    },
    leave: {
        opacity: 0,
        transform: "translate3d(0px,-500px,0px) scale(1)"
    },
    config: {
        duration: 3000
    }
});

我知道这是意料之中的，一般的解决方案是在

正文

中添加

溢出：隐藏

但我不确定在动画发生时如何执行此操作？因为我不想在任何时候都将

溢出：隐藏
添加到
正文
，因为我确实需要在某些页面中访问滚动条，而不是在动画启动时

这里有一个供你们自己尝试的方法

非常感谢您的帮助。
您可以使用document.body.classList.add和remove更改正文的类别。例如，您可以再添加一个useEffect，如下所示：

useffect（（）=>{
如果（显示）{
document.body.classList.add（“动画”）；
}否则{
document.body.classList.remove（“动画”）；
}
}，[秀]；

当然，你必须为班级定义你的风格：

。动画{
溢出：隐藏；
}

请参见此处的示例。

这只是一个粗略的例子。您可以将classList.remove添加到useEffect的返回中。或者，如果希望在动画停止时将其删除，可以尝试将其添加到useTransition的onRest回调中。
可以使用document.body.classList.add和remove更改主体的类。例如，您可以再添加一个useEffect，如下所示：

useffect（（）=>{
如果（显示）{
document.body.classList.add（“动画”）；
}否则{
document.body.classList.remove（“动画”）；
}
}，[秀]；

当然，你必须为班级定义你的风格：

。动画{
溢出：隐藏；
}

请参见此处的示例。

这只是一个粗略的例子。您可以将classList.remove添加到useEffect的返回中。或者，如果希望在动画停止时将其删除，可以尝试将其添加到useTransition的onRest回调中