JS學習40:計算滾動條的寬度
阿新 • • 發佈:2019-02-04
http://qianduanblog.com/post/js-learning-40-get-scrollbar-width.html
在計算滾動條之前,說明下滾動條的佔位方式。在PC瀏覽器中,滾動條是佔位元素的內邊距和內容區域的;而在移動瀏覽器中,滾動條是不佔用內邊距和內容區域,並且還及時顯隱。因此,只需要在在PC瀏覽器中計算滾動條的寬度,尤其是在全屏彈窗不可滾動的情況中。
詳細方法如下(offsetWidth-clientWidth
):
- function getScrollbarWidth(){
- var oP = document.createElement('p'),
- styles =
- width:'100px',
- height:'100px',
- overflowY:'scroll'
- }, i, scrollbarWidth;
- for(i in styles) oP.style[i]= styles[i];
- document.body.appendChild(oP);
- scrollbarWidth = oP.offsetWidth - oP.clientWidth;
- oP.remove();
- return scrollbarWidth;
- }
方法2(clientWidth-clientWidth
):
- function getScrollbarWidth(){
- var oP
- styles ={
- width:'100px',
- height:'100px'
- }, i, clientWidth1, clientWidth2, scrollbarWidth;
- for(i in styles) oP.style[i]= styles[i];
- document.body.appendChild(oP);
- clientWidth1 = oP.clientWidth;
- oP.style.overflowY ='scroll';
- clientWidth2 = oP.clientWidth;
- scrollbarWidth =
- oP.remove();
- return scrollbarWidth;
- }