捲軸條寬度是多少?
重要性:3
撰寫程式碼,傳回標準捲軸條的寬度。
在 Windows 中,通常會在 12px
和 20px
之間變化。如果瀏覽器未保留任何空間給它(捲軸條半透明覆蓋在文字上,也會發生),則可能是 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);