滾動條這個小妖精實在太磨人了，關(guān)於它到底佔用哪兒的位置，我找到這樣一篇博客，根據(jù)實踐結(jié)果也似乎是這麼回事：
捲軸佔據(jù)的是content的位置，但顯示時是貼邊顯示。 （根據(jù)實際效果是貼著border顯示，在border內(nèi)部）
#然後js裡有一個clientHeight，MDN的定義是：
Element.clientWidth 屬性表示元素的內(nèi)部寬度，以像素為單位。此屬性包括內(nèi)邊距，但不包括垂直捲軸（如果有的話）、邊框和外邊距。
這屬性有毛用啊，比如說我有一粉紅色p，寬高100px，padding-right是20px（藍色部分），clientWidth就是內(nèi)部寬度83px（100-17，17是滾動條寬度）加上padding-right的20px，等於103px，要這玩意兒有什麼用??？ ！中間還夾著個電燈泡滾動條就不要了是鬧哪樣啊？
#這個屬性有什麼實際用途嗎？我覺得用這獲取視口寬高很不靠譜啊，為什麼js高程上用body.clientWidth取得頁面視口大小啊？
PS，請問哪裡有關(guān)於捲軸的標(biāo)準(zhǔn)官方特性描述嗎？
1
0
0
歡迎選擇我的課程，讓我們一起見證您的進步~~
一、瀏覽器視窗
body{
width: 2000px;
height: 3000px;
}document.body.clientWidth//輸出2000此時，這樣取得的body標(biāo)籤的寬度，不是什麼視口大小
document.documentElement.clientWidth 上面這個是不帶垂直滾動條寬度（一般為17）的瀏覽器視窗寬度，它也不包括瀏覽器外邊框。
window.innerWidth這個則是瀏覽器視窗內(nèi)可見區(qū)域?qū)挾龋?dāng)沒有垂直滾動條時，它與document.documentElement.clientWidth完全一樣，如果有垂直滾動條，它會包含垂直滾動條寬度（一般為17）。
所以如果要取得垂直捲軸寬度，可以：
window.innerWidth - document.documentElement.clientWidth二，在某個p元素中
html
<p class="demo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora voluptatem similique earum ipsam expedita neque excepturi provident id. Quam, perspiciatis, cumque. Fugiat, iste, alias? Ea quo explicabo pariatur voluptatibus omnis.</p>css
.demo {
width: 100px;
height: 200px;
overflow-y: scroll;
padding: 10px;
}js
let demo = document.querySelector('.demo');
let noScrollWidth = demo.clientWidth; //不含垂直滾動條寬度
let hasScrollWidth = demo.offsetWidth; //包含垂直滾動條寬度-整個p的實際寬度
let scrollWidth = hasScrollWidth - noScrollWidth; //垂直滾動條的寬度
console.log(scrollWidth);如果你要獲取某個p的實際寬高，不管它是否有滾動條，應(yīng)該用offsetWidth、offserHeight
而clientWidth則可用於計算垂直滾動條實際寬度（有時垂直滾動條的寬度是自自定義的，就不是預(yù)設(shè)的17了）
