CODEWITHSUNDEEP
javascriptreactjsscrollbar
Alpaca
Alpaca

Reputation: 166

How do I check if the page is scrollable when the user first accesses it in React?

I want to display scrollbar when the user first accesses each page

So I tried the code below:

function App() {
  const app = document.querySelector("#root");
  const [scrollHeight, setScrollHeight] = useState(app?.scrollHeight);

  useEffect(() => {
    setScrollHeight(app.scrollHeight);
  }, [scrollHeight])

  if (scrollHeight > window.innerHeight) {
    /* show scrollbar and do something */
  }

  return (/* some components */);
}

Isn't there a better idea?

Upvotes: 0

Views: 44

Answers (1)

Minh Tri Ha
Minh Tri Ha

Reputation: 21

In page.css or wrapper html element of Page component, you can set.

For page.css:

{ overflow: auto }

For wrapper html element:

"<div style={{overflow: 'auto'}}>"

Document link: overflow css

Upvotes: 2

Related Questions