我会升级到他们的最新版本,截至本文撰写之时
1.5.6
。其中一个原因是,如果你查看他们的文档,他们之前有一个名为的道具
option
不
options
我在CodeSandBox中测试了这个理论,我可以得出结论
选项
道具相关
suppressScrollY
仅适用于
1.5.1
向上。
我发现的另一个问题是,他们的组件目前在重新渲染方面存在问题
suppressScrollY
到
true
并将其状态设置为,例如
false
,这些变化不会立即反映出来。不幸的是,要解决这个问题,您必须重新安装组件。
请参阅下面代码中的注释:
import React, { useState } from "react";
import "react-perfect-scrollbar/dist/css/styles.css";
import PerfectScrollbar from "react-perfect-scrollbar";
export default function App() {
const [scrollYSuppressed, setScrollYSuppressed] = useState(true);
const [key, setKey] = useState(0);
const sampleContainer = {
maxHeight: "100px"
};
const sampleContent = {
height: "200px",
background: "black"
};
return (
<div className="App">
<PerfectScrollbar
style={sampleContainer}
options={{ suppressScrollY: scrollYSuppressed }}
onScrollY={(container) =>
console.log(`scrolled to: ${container.scrollTop}.`)
}
key={key}
>
<div style={sampleContent}></div>
</PerfectScrollbar>
<div>scrollYSuppressed: {scrollYSuppressed.toString()}</div>
<button
onClick={() => {
setScrollYSuppressed(!scrollYSuppressed);
setKey(key + 1);
}}
>
Toggle Scroll Y
</button>
</div>
);
}