JS uses offsetwidth and clientwidth to calculate the width of the scroll bar

Original: Http://www.haorooms.com/post/js_scroll_width

Reference: https://www.cnblogs.com/benxiaohai-microcosm/p/7814825.html

-------------------------------------------------------------------------------------

Hello everyone, 11 small holiday is over. I believe that everyone is very happy to play, have not enjoyed it! Many netizens look forward to the mother of the motherland another Chinese birthday!!! Come on, today I'm going to focus on an example of how to calculate the width of a scrollbar.

Objective

In fact, in many cases the width of the scroll bar is not calculated, especially Google Browser, you can beautify the scroll bar, specifically see http://www.haorooms.com/post/CSS_selections here for example, has defined the width of the scrollbar is 9px plus a pixel of padding-left, so the width of the scrollbar should be 10px, but, this calculation has a browser compatibility problem, your IE browser scroll bar width is not necessarily 10px, today, I use offsetwidth and clientwidth to calculate the width of the scroll bar.

Placeholder mode

In a PC browser, the scrollbar is the padding and content area of the placeholder element, whereas in a mobile browser, the scroll bar is not occupied with the padding and content areas, and is also hidden in time. Therefore, you only need to calculate the width of the scroll bar in the PC browser, especially if the full-screen pop-up window is not scrollable.

Offsetwidth-clientwidth method

Speaking of Offsetwidth and ClientWidth, many friends are confused, what does this width mean? Http://www.haorooms.com/post/js_jquery_height This article hung about the various heights of JavaScript, introduced the offsetwidth and clientwidth and so on, we can look at!!

functionGetscrollbarwidth() { VarOP=Document.CreateElement(' P '),Styles= {Width: ' 100px ',Height: ' 100px ',Overflowy: ' Scroll ' },I,Scrollbarwidth; For (IInchStyles)OP.Style[I] = Styles[i  Document.. Appendchildop Scrollbarwidth = Op.- Op.; Op.return Scrollbarwidth;               /span>                

Use

console.dir(getScrollbarWidth());

You can output the width of the scroll bar, you can try it!

Clientwidth-clientwidth method

This method is the same as the above method!

functionGetscrollbarwidth() { VarOP=Document.CreateElement(' P '),Styles= {Width: ' 100px ',Height: ' 100px ' },I,ClientWidth1,ClientWidth2,Scrollbarwidth; For (IInchStyles)OP.Style[I] =Styles[I];Document.Body.AppendChild(OP);ClientWidth1=OP.clientwidth; Op.. Overflowy =  ' scroll ' ;= Op.; Scrollbarwidth =- Clientwidth2; OP remove (); return Scrollbarwidth;               /span>                

Use the same way!

console.dir(getScrollbarWidth());

Just introduced a method of calculating the scroll bar, we can use the time to refer to, I hope to help you!

PREVIOUS:

JS uses offsetwidth and clientwidth to calculate the width of the scroll bar