In terms of usability should width of custom scrollbar be thin or thick?

Your scrollbar should be at least as thick as the smallest browser thickness since your users spend most of their time on other websites/applications and therefor expect the scrollbar to be at least as big as in their browser.

1. How do you measure the width of a scroll bar?
2. How do I make my scroll bar thicker?
3. How do I make my scrollbar not affect width?
4. What two types of scrolling should be avoided?

How do you measure the width of a scroll bar?

ClientWidth defines the width of an element. So scrollbar can be defined as width = offsetWidth – clientWidth.

How do I make my scroll bar thicker?

Double-click/tap on ScrollHeight. The Edit String window will open with the default value of -255. That is the standard size of the scrollbars you see on Windows. To change the Scrollbars height to your liking, enter a value between -120 (smaller) to -1500 (larger) for the size you want, and click/tap on OK.

How do I make my scrollbar not affect width?

The easy fix is to use width: 100% instead. Percentages don't include the width of the scrollbar, so will automatically fit. If you can't do that, or you're setting the width on another element, add overflow-x: hidden or overflow: hidden to the surrounding element to prevent the scrollbar.

What two types of scrolling should be avoided?

There are a couple of basic scrolling problems we often see, and that you should be sensitive to. The first is horizontal scrolling, which is typically unnecessary. Unless the interaction is a carousel, a timeline, or an intentionally horizontally structured feature, you should not be seeing a horizontal scrollbar.