How do I get the width of the scrollbar?

Question

I am using a canvas that covers the whole screen and creates an animated effect that follows the cursor, and I want it to not follow the cursor when it's over the scrollbar, I could do that easily if I knew the width of the scrollbar, is there anyway to get that? Or perhaps is there any event that triggers when cursor hovers over the scrollbar? That could work too I guess.

Answer 1

It is not possible to get the width of the default scrollbar with JS. From this dev.to article, I think there is a solution. https://dev.to/xtrp/how-to-create-a-beautiful-custom-scrollbar-for-your-site-in-plain-css-1mjg
You can set a custom scrollbar of which the width is known.

Answer 2

Why not hide the scrollbar?

Answer 3

Ore because I want people to be able to scroll

Answer 4

Karak10
main scroll bars (body: viewport does not include scroll bars) should not triger any events (including mouse events)...

however, inner scroll bars (body childs) could...

do you have some inner scroll bars element (above or under your full viewport canvas) on wich you want to deactivate events trigering?

if so, scroll bar width/height (vertical/horizontal) could be computed by subtract element client width/height to offset witdth/height:

vscroll = element.offsetWidth-element.clientWidth;
hscroll = element.offsetHeight-element.clientHeight;

... but in case of body, offset and client width/height should always be equals ^^

could you share the code of your use case, as well with your device/platform/browser and those you need to support?