CODEWITHSUNDEEP
reactjsscrollbar
user3808307
user3808307

Reputation: 1549

How to add options to react-perfect-scrollbar in react

I am using react-perfect-scrollbar and initilizing like this

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

I am trying to add options, in particular, suppressScrollY. I tried

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

and it gets ignored.

What am I missing here? Thank you

Upvotes: 0

Views: 9136

Answers (1)

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

I would upgrade to their latest release, which is as of this writing 1.5.6. One of the reasons is, if you look at their docs, they previously have this prop named option not options. I've tested this theory in CodeSandBox and I can conclude that the options prop pertaining to suppressScrollY only works on 1.5.1 and up.

Another issue that I've found is their component currently has issues with re-rendering. If you, for example, have initially set suppressScrollY to true and set its state, for example, to false, the changes will not reflect right away. To address this, you have to unfortunately re-mount the component.

See my comments in the code below:

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

Upvotes: 2

Related Questions