0

I'm working on a website and I need to detect if the scrollbars have gutters or if they are in overlay mode. I was able to detect gutters and adjust my layout by checking offsetHeight vs clientHeight at initialization, but I would like to be able to detect it during navigation on the page ; for example, if scrollbars are overlay by default and the user changes its settings to always show them in gutters.
I tried various ways like ResizeObserver or MutationObserver to detect when my offset changes, but I can't get anything working.

What is the best way to dynamically detect scrollbar mode ?

Ericlm
  • 117
  • 1
  • 13
  • Does this answer your question? [How can I get the browser's scrollbar sizes?](https://stackoverflow.com/questions/986937/how-can-i-get-the-browsers-scrollbar-sizes) – Sergiu Paraschiv May 05 '21 at 14:52
  • Not really, I need to react to changes in the scroll behavior, that is, an event that would be fired when the scrollbar is overlay vs when the scrollbar is in a gutter (and creates an offset in the layout). – Ericlm May 05 '21 at 15:45
  • Could you show us what you tried with the observers? It seems odd that observing did not work. – A Haworth May 05 '21 at 17:34
  • I simply put a `console.log` inside a ResizeObserver that observe the view whose `offsetHeight` is different from `clientHeight`. And looking at [this issue](https://github.com/w3c/csswg-drafts/issues/3550), the resize observer does not catch offset changes. – Ericlm May 06 '21 at 13:29

0 Answers0