🔰scrollbar width

🔰 JS ⟩ browser ⟩ DOM ⟩ types ⟩ HTMLElement ⟩ scroll area ⟩ scrollbar width

💾 程式

💾 replit: scrollbar width

⬆️ 需要： newElement()

// create an element with the scroll, but without borders and paddings.
let div = newElement('div', (self) => {
    
    self.style.overflowY = 'scroll';
    self.style.width = '50px';
    self.style.height = '50px';
    self.style.background = '#999';

    self.innerText = 'xxx '.repeat(50);
    
    // must put it in the document, otherwise sizes will be 0
    document.body.append(self);
});

// scrollbar width
let scrollbarWidth = div.offsetWidth - div.clientWidth;

📗 參考

• JS.info ⟩ Element size and scrolling ⟩ What is the scrollbar width?