check if scrollbar is visible with virtual dom

Question

So I was reading the solution here: https://stackoverflow.com/Questions/4814398/how-can-i-check-if-a-scrollbar-is-visible

This is what I am going with...

function hasScrollbar() {
    console.log(
        "hasScrollbar:",
        document.body.scrollHeight > document.body.clientHeight
    );
    return document.body.scrollHeight > document.body.clientHeight;
}

<div
    className="landing-top"
    style={{ paddingRight: hasScrollbar() ? "0px" : `${scrollBarWidth}px` }}
></div>

However, because of reacts virtual dom, it doesn't seem to be reading it correctly...

Does anyone have any ideas?

Are you sure you want to scroll through the body? I checked this on several different websites and get the true — Ali Yaghoubi, Feb 13 '22 at 04:21

score 0 · Answer 1 · answered Feb 12 '22 at 17:56

0

You can try using

const overflows = document.body.scrollHeight > document.body.clientHeight;

answered Feb 12 '22 at 17:56

Akmal

337
3
8

doesn't seem to work for me. I even tried using useEffect with a timeout. – Fiddle Freak Feb 12 '22 at 21:29

Fiddle Freak · Accepted Answer · 2022-02-13T22:33:37.610

For some unknown reason this didn't work when I tried it before, but it is working now...

const [isScrollBarVisible, setIsScrollBarVisible] = useState(false);

function hasScrollbar() {
  return document.body.scrollHeight > document.body.clientHeight;
}

useEffect(() => {
  setIsScrollBarVisible(hasScrollbar());
}, [isLoadingData, isSearchingData, searchText]);

<div
  className="landing-top"
  style={{ paddingRight: isScrollBarVisible ? '0px' : `${scrollBarWidth}px` }}
>...more html elements here...</div>

I think all I ended up doing to fix it was restarting the server. Very weird, but this is working now.

check if scrollbar is visible with virtual dom

2 Answers2