有些情況下,需要取得Scrollbar寬度來動態計算元件長寬
參考了一下網路上的作法,用jQuery寫了一個function來做這件事
/**
* 1. Generate nested divs
* 2. Calculate the width of inner div before and after scrollbar becomes visible.
* @returns calculated scrollbar width
*/
function getScrollbarWidth() {
var $tempNode =
$('<div/>')
.css({
width: 100,
position: 'absolute',
top: -1000
})
.append($('<div/>', { height: 100 }))
.appendTo('body');
var withoutSroll = $tempNode.children(':first').innerWidth();
var withScroll = $tempNode.css({ 'overflow-y': 'scroll' })
.children(':first').innerWidth();
$tempNode.remove();
return withoutSroll - withScroll;
}
沒有留言:
張貼留言