Q
div滾動條寬度
6
A
回答
12
,如果你使用jQuery,試試這個:
function getScrollbarWidth()
{
var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div></div>');
$('body').append(div);
var w1 = $('div', div).innerWidth();
div.css('overflow-y', 'auto');
var w2 = $('div', div).innerWidth();
$(div).remove();
return (w1 - w2);
}
我使用這個項目我的工作,它就像一個魅力。它通過獲取滾動條寬度:
- 追加一個div溢出內容的主體(在非可視區域,-200px頂部/左)
- 集溢出
hidden
- 得到寬度
- 集溢流到
auto
(以獲得滾動條) - 得到寬度
- 兩者。減去寬度以得到滾動條的寬度
所以你要做的就是讓你的div($('#mydiv').width()
)的寬度並添加滾動條寬度什麼:
var completewidth = $('#mydiv').width() + getScrollbarWidth();
0
這是一個普通的JavaScript版本是這樣更快。
function getScrollbarWidth() {
var div, body, W = window.browserScrollbarWidth;
if (W === undefined) {
body = document.body, div = document.createElement('div');
div.innerHTML = '<div style="width: 50px; height: 50px; position: absolute; left: -100px; top: -100px; overflow: auto;"><div style="width: 1px; height: 100px;"></div></div>';
div = div.firstChild;
body.appendChild(div);
W = window.browserScrollbarWidth = div.offsetWidth - div.clientWidth;
body.removeChild(div);
}
return W;
};
2
設置一個div的溢出「scroll
」自動添加scrollbars
(即使沒有什麼的裏面,scrollbars
會在那裏,但灰色)。因此,只要一格,找到寬度,設置溢出滾動,並找到新的寬度,並返回的區別:
function getScrollBarWidth() {
var helper = document.createElement('div');
helper.style = "width: 100px; height: 100px; overflow:hidden;"
document.body.appendChild(helper);
var bigger = helper.clientWidth;
helper.style.overflow = "scroll";
var smaller = helper.clientWidth;
document.body.removeChild(helper);
return(bigger - smaller);
}
+0
出於好奇,這是否適用於mac上最新版本的Safari瀏覽器,滾動條僅在懸停時出現?我只問,因爲我最近花了很多時間試圖在放棄之前嘗試查找滾動條的寬度,並宣佈Mac Safari上的三個用戶可以處理5或6像素跳躍。我只是試圖檢查自己,但發現safari的windows版本似乎沒有表現出相同的行爲。編輯:這是因爲它不是Safari,但獅子這樣做。我猜這些解決方案可能不適用於Lion。 –
3
試試這個
$("#myDiv")[0].scrollWidth
相關問題
- 1. CSS滾動條寬度
- 2. HTML滾動條寬度
- 3. 水平滾動條寬度
- 4. 沒有設置div的寬度,顯示div overflow-x滾動條?
- 5. CSS:100% - 高度/寬度邊界div內的DIV創建垂直滾動條,但不是水平滾動條
- 6. 水平滾動條和寬度自動
- 7. div與屏幕寬度和滾動
- 8. CSS DIV滾動條和帶最小寬度的背景
- 9. CSS DIV滾動條最小寬度問題
- 10. 根據媒體寬度顯示div的滾動條
- 11. div與滾動條減少內容寬度
- 12. 您可以在IE7中更改滾動條(滾動DIV)的寬度
- 13. IE DIV寬+滾動
- 14. ScrollView中Android滾動條的寬度
- 15. 100%寬度創建水平滾動條
- 16. Tkinter Listbox寬度干擾滾動條
- 17. IE8文檔寬度包含滾動條
- 18. Fancybox不佔用滾動條寬度
- 19. Android中滾動條的寬度
- 20. AngularJS下拉滾動條和寬度
- 21. IE瀏覽器滾動條的寬度?
- 22. 僞造一個滾動條寬度
- 23. 查找TileList的寬度 - 滾動條寬度Flex
- 24. 如何把DIV滾動條放在固定寬度的DIV內(overflow:auto,float:left)
- 25. 使DIV滾動條主頁滾動條?
- 26. DIV - 100%高度導致滾動條
- 27. DIV高度垂直滾動條
- 28. jquery有條件寬度div
- 29. DIV的滾動條
- 30. div的滾動條
可悲的是不與MacOS的獅子的工作滾動條... – jedierikb