已解決430363個問題，去搜搜看，總會有你想問的

防止滾動條出現在變換上：使用 React-Spring 進行翻譯

首頁猿問防止滾動條出現在變換上：使用...

防止滾動條出現在變換上：使用 React-Spring 進行翻譯

JavaScript

藍山帝景 2022-01-20 20:41:30

每當我將translate()CSS 函數添加到元素將離開視口的react-spring useTransition鉤子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 }});我知道這是意料之中的，一般的解決方案是添加overflow: hidden到body.但是我不確定在動畫發生時如何執行此操作？因為我不想一直添加overflow: hidden，body因為我確實需要訪問某些頁面中的滾動條，而不是在動畫啟動時？這是一個CodeSandbox供您自己嘗試

查看完整描述

1 回答

慕田峪7331174

TA貢獻1828條經驗獲得超13個贊

您可以使用 document.body.classList.add 和 remove 更改正文的類。例如，您可以再添加一個 useEffect，如下所示：

useEffect(() => {

if (show) {

document.body.classList.add("animation");

} else {

document.body.classList.remove("animation");

}

}, [show]);

當然，您必須為班級定義您的風格：

.animation {

overflow: hidden;

}

請參閱此處的示例。 https://codesandbox.io/s/react-spring-scroll-fj6t8

這只是一個粗略的例子。您可以將 classList.remove 添加到 useEffect 的返回中。或者，如果您想在動畫停止時將其移除，您可以嘗試將其添加到 useTransition 的 onRest 回調中。

反對回復 2022-01-20

1 回答
0 關注
246 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

防止滾動條出現在變換上：使用 React-Spring 進行翻譯

防止滾動條出現在變換上：使用 React-Spring 進行翻譯

1 回答

添加回答