offsetWidth clientWidth scrollWidth 的區別

瞭解 offsetWidth clientWidth scrollWidth 的區別

最近須要清除區分開元素的width，height及相應的座標等，當前這篇用來區分offsetWidth clientWidth scrollWidth的區別

各自的概念

假設有一個元素，width有如下幾個進行組合

• content
• padding-left
• padding-right
• scrollbar 垂直的滾動條寬度（假設有，沒有便爲0）
• border-left
• border-right

clientWidth = content + padding-left + padding-right

offsetWidth = content + padding-left + padding-right + border-left + border-right + scrollbar

scrollWidth = content + padding-left + padding-right + scrollbar + border-left + border-right +滾動進入不可見的內容

示例

在上述中，咱們能夠計算出 scrollbar 爲

const scrollbar = el.offsetWidth - (border-left + border-right) - clientWidth

html

<section class="client-xyz">
    <p>我是很長很長的內容我是很長很長的內容我是很長很長的內容我是很長很長的內容我是很長很長的內容我是很長很長的內容</p>
</section>

css

p {
    margin: 20px;
    padding: 20px;
    /* border: 30px solid #333; */
    /* border: 10vw solid #333; */
    /* border: calc(100px - 70px) solid #333; */
    border: 30px solid #333;
    word-break: keep-all;
    overflow-y: scroll;
}

js

const Box = document.querySelector('p')

let border = 0
// 獲取元素的style信息
const style = window.getComputedStyle(Box, null)
// border無論設置的單位如何，最終都會轉爲 px 
border = parseFloat(style['borderRightWidth'].replace('px', '')) + parseFloat(style['borderLeftWidth'].replace('px', ''))

const scollbar = Box.offsetWidth - Box.clientWidth - border

總結

• 知道了計算滾動條寬度，並非簡單的 el.offsetWidth - el.clientWidth 而是還須要減去border的寬度
• clientWidth,offsetWidth,scrollWidth