+ 2

How do I get the width of the scrollbar?

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.

3rd Mar 2021, 11:07 AM
Karak10
Karak10 - avatar
4 odpowiedzi
+ 2
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.
3rd Mar 2021, 3:12 PM
Ore
Ore - avatar
+ 1
Why not hide the scrollbar?
3rd Mar 2021, 11:42 AM
Ore
Ore - avatar
0
Ore because I want people to be able to scroll
3rd Mar 2021, 3:06 PM
Karak10
Karak10 - avatar
0
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?
3rd Mar 2021, 5:59 PM
visph
visph - avatar