返回課程

捲軸條寬度是多少?

重要性:3

撰寫程式碼,傳回標準捲軸條的寬度。

在 Windows 中,通常會在 12px20px 之間變化。如果瀏覽器未保留任何空間給它(捲軸條半透明覆蓋在文字上,也會發生),則可能是 0px

備註:此程式碼應可適用於任何 HTML 文件,與其內容無關。

若要取得捲軸寬度,我們可以建立一個有捲軸但沒有邊框和填補的元素。

然後,其完整寬度 offsetWidth 與內部內容區域寬度 clientWidth 之間的差異將正好等於捲軸

// 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);