How do I get the width of the scrollbar? | SoloLearn: Learn to code for FREE!


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.

3/3/2021 11:07:51 AM


4 Answers

New Answer


Why not hide the scrollbar?


Ore because I want people to be able to scroll


It is not possible to get the width of the default scrollbar with JS. From this article, I think there is a solution. You can set a custom scrollbar of which the width is known.


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?