代码之家  ›  专栏  ›  技术社区  ›  user3808307

如何在react中添加选项以实现完美滚动条

  •  0
  • user3808307  · 技术社区  · 4 年前

    我正在使用 react-perfect-scrollbar 然后像这样启动

    <PerfectScrollbar
        onScrollY={container => console.log(`scrolled to: ${container.scrollTop}.`)}>
        ... SCROLLBAR CONTENT HERE ...
    </PerfectScrollbar>
    

    我试图添加 options 尤其是, suppressScrollY 我试过了

    <PerfectScrollbar
        options={{ suppressScrollY: true }}
        ... SCROLLBAR CONTENT HERE ...
    </PerfectScrollbar>
    

    它被忽略了。

    我在这里错过了什么? 非常感谢。

    0 回复  |  直到 4 年前
        1
  •  1
  •   95faf8e76605e973    4 年前

    我会升级到他们的最新版本,截至本文撰写之时 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() {
      // holds the state if scrollY should be suppressed
      const [scrollYSuppressed, setScrollYSuppressed] = useState(true);
    
      // holds the state for the key prop of PerfectScrollbar
      // will be incremented to force re-mounting of component
      // due to issues with reinitializing options prop
      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>
      );
    }
    

    Edit React Perfect Scrollbar