700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 有趣且重要的JS知识合集(14)浏览器获取滚动条宽度

有趣且重要的JS知识合集(14)浏览器获取滚动条宽度

时间:2024-01-11 07:27:18

相关推荐

有趣且重要的JS知识合集(14)浏览器获取滚动条宽度

当很多时候,滚动条宽度也会影响到我们页面上的布局,那怎么去计算这宽度呢?浏览器没有提供这方法来计算,那么我们就模拟一个有滚动条的div,然后算出宽度~

小知识:offsetWidth和clientWidth都是只读属性,但是offsetWidth是包括border的,而clientWidth只包含padding,不包含border的,所以可以利用这个差距来计算border宽度

/*** 获取滚动条宽度*/getScrollbarWidth() {const scrollDiv = document.createElement('div');scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;'document.body.appendChild(scrollDiv)const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidthdocument.body.removeChild(scrollDiv)return scrollbarWidth},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。