• ARعربي
  • ENEnglish
  • ESEspañol
  • FAفارسی
  • FRFrançais
  • IDIndonesia
  • ITItaliano
  • JA日本語
  • KO한국어
  • RUРусский
  • TRTürkçe
  • UKУкраїнська
  • ZH简体中文

ما قصد داریم این پروژهٔ متن‌باز را در دسترس همهٔ مردم در سرتاسر دنیا قرار دهیم.

به ترجمهٔ محتوای این آموزش به زبان خودتان کمک کنید/a>.

    نقشه آموزش
    اشتراک گذاری
    • آموزش
    • مرورگر: Document، Eventها، رابط‌ها
    • Document
    • Element size and scrolling
    بازگشت به درس
    این محتوا تنها در این زبان‌ها موجود است: English, Español, Français, Italiano, 日本語, Русский, Türkçe, Українська, 简体中文. لطفاً به ما

    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);
    • © 2007—2025  Ilya Kantor
    • دربارهٔ پروژه
    • تماس با ما