GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing ko.javascript.info — What is the scrollbar width?

이 글은 다음 언어로만 작성되어 있습니다. Čeština, Dansk, English, Español, Français, Italiano, 日本語, Русский, Türkçe, Українська, Oʻzbek, 简体中文. 한국어 번역에 참여해주세요.

What is the scrollbar width?

중요도: 3

Write the code that returns the width of a standard scrollbar.

For Windows it usually varies between 12px and 20px. If the browser doesn’t reserve any space for it (the scrollbar is half-translucent over the text, also happens), then it may be 0px.

P.S. The code should work for any HTML document, do not depend on its content.

To get the scrollbar width, we can create an element with the scroll, but without borders and paddings.

Then the difference between its full width offsetWidth and the inner content area width clientWidth will be exactly the scrollbar:

// create a div with the scroll
let div = document.createElement('div');

div.style.overflowY = 'scroll';
div.style.width = '50px';
div.style.height = '50px';

// must put it in the document, otherwise sizes will be 0
document.body.append(div);
let scrollWidth = div.offsetWidth - div.clientWidth;

div.remove();

alert(scrollWidth);

You are visitor 01402520 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.