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

Question

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?

You want to show scrollbar only if the page is scrollable right? If that's the case you can achieve it using css — arp, Nov 16 '22 at 11:15
Check this. https://stackoverflow.com/questions/7492062/css-overflow-scroll-always-show-vertical-scroll-bar — arp, Nov 17 '22 at 07:00

Minh Tri Ha · Answer 1 · 2022-11-17T04:11:55.607

2

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

edited Nov 17 '22 at 04:11

answered Nov 17 '22 at 04:10

Minh Tri Ha

21
2

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

1 Answers1