獲取使用JavaScript

以下HTML將顯示在內部div.container的邊緣右側的滾動條滾動條的寬度。獲取使用JavaScript

是否可以確定該滾動條的寬度？

<div class="container" style="overflow-y:auto; height:40px;"> 
    <div class="somethingBig"></div> 
</div>

來源

2012-11-14 user1032531

這個問題出現的情況是，滾動條位於錯誤的位置（屏幕中間的某處）。在這種情況下，你可能不想顯示滾動條。在大多數情況下，我發現iScroll是針對這種情況的完美設計中立解決方案：http：//iscrolljs.com – JoostS

150

這個功能應該給你的寬度滾動條的

function getScrollbarWidth() { 
    var outer = document.createElement("div"); 
    outer.style.visibility = "hidden"; 
    outer.style.width = "100px"; 
    outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps 

    document.body.appendChild(outer); 

    var widthNoScroll = outer.offsetWidth; 
    // force scrollbars 
    outer.style.overflow = "scroll"; 

    // add innerdiv 
    var inner = document.createElement("div"); 
    inner.style.width = "100%"; 
    outer.appendChild(inner);   

    var widthWithScroll = inner.offsetWidth; 

    // remove divs 
    outer.parentNode.removeChild(outer); 

    return widthNoScroll - widthWithScroll; 
}

這裏的基本步驟是：

使用CSS overflow屬性與寬度設置爲「100像素」創建隱藏的div（外），並獲得偏移寬度（應爲100）
強制滾動條出現在DIV（外）
創建新的div（內）和追加到外，它的寬度設置爲「100％」，並獲得偏移寬度

工作示例這裏

計算滾動條寬度：http://jsfiddle.net/UU9kg/17/

更新

如果您在Windows（metro）應用程序上使用此功能，請確保將'outer'div的-ms-overflow-style屬性設置爲scrollbar，否則將無法正確檢測寬度。（代碼更新）

更新＃2 「滾動時只顯示滾動條」設定（Yosemite和達）這將無法在Mac OS使用默認工作。

來源

2012-11-14 16:25:54 lostsource

非常好!!!!!! – user1032531

這是一個很棒的解決方案。謝謝。 – digitalextremist

不錯。如果使用附加到函數的閉包來緩存該值並將其返回以便該函數只需創建/銷燬該div並計算一次值，則可以使其更好。 – Sildoreth

如果孩子接受容器不包括滾動條（默認）的整個寬度，那麼你就可以減去寬度：

var child = document.querySelector(".somethingBig"); 
var scrollbarWidth = child.parentNode.offsetWidth - child.offsetWidth;

來源

2012-11-14 16:09:05 pimvdb

孩子沒有佔用容器的全部寬度。 – user1032531

我應該顯示不同的HTML。 div.somethingBig真的是一張桌子，而不是一個div，而且它會很窄很高。我的錯。 – user1032531

太棒了！謝謝！ –

我用下面的函數來獲得滾動條的高度/寬度：

function getBrowserScrollSize(){ 

    var css = { 
     "border": "none", 
     "height": "200px", 
     "margin": "0", 
     "padding": "0", 
     "width": "200px" 
    }; 

    var inner = $("<div>").css($.extend({}, css)); 
    var outer = $("<div>").css($.extend({ 
     "left":  "-1000px", 
     "overflow": "scroll", 
     "position": "absolute", 
     "top":  "-1000px" 
    }, css)).append(inner).appendTo("body") 
    .scrollLeft(1000) 
    .scrollTop(1000); 

    var scrollSize = { 
     "height": (outer.offset().top - inner.offset().top) || 0, 
     "width": (outer.offset().left - inner.offset().left) || 0 
    }; 

    outer.remove(); 
    return scrollSize; 
}

這基於jQuery的解決方案，工作在IE7 +和所有其他現代瀏覽器（包括移動設備，其中滾動條的高度/寬度爲0）。

來源

2014-03-19 15:10:08 Gromo

高度和寬度有沒有不同？ –

他們可能會有所不同。目前，只有基於webkit的瀏覽器纔有可能（safari，google chrome，opera）。 – Gromo

下面是使用jQuery一個簡單的方法。

var scrollbarWidth = jQuery('div.withScrollBar').get(0).scrollWidth - jQuery('div.withScrollBar').width();

基本上我們從整體寬度中減去可滾動寬度，應該提供滾動條的寬度。當然，你會想緩存的jQuery（「div.withScrollBar」）的選擇，所以你沒有做這部分的兩倍。

來源

2014-11-25 08:06:27

this工作對我來說..

function getScrollbarWidth() { 
    var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>'); 
    $('body').append(div); 
    var w1 = $('div', div).innerWidth(); 
    div.css('overflow-y', 'scroll'); 
    var w2 = $('div', div).innerWidth(); 
    $(div).remove(); 
    return (w1 - w2); 
}

來源

2015-08-26 17:17:35

看起來很像http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php，但你沒有相信原始來源，不良形式！ –

@DarrylMiles在這裏你去..我不想拿信用，從來沒有想到的，只是想發佈ans爲我工作，並沒有在這篇文章中找到相同的。 –

假設容器只頁面上一次，你使用jQuery，則：

var containerEl = $('.container')[0]; 
var scrollbarWidth = containerEl.offsetWidth - containerEl.clientWidth;

另見this answer瞭解更多詳情。

來源

2015-09-09 23:45:04 robocat

// offsetWidth包含滾動條的寬度和clientWidth沒有。按規則，它等於14-18px。所以：

var scrollBarWidth = element.offsetWidth - element.clientWidth;

來源

2016-11-12 23:11:51

offsetWidth不包含滾動條，至少在當前最新的chrome –

@DavidGuan ok，我會檢查它 –

如果使用jquery.ui，試試這個代碼：

$.position.scrollbarWidth()

來源

2017-02-20 12:29:03 Alvego

我認爲這將是簡單而快速 -

var scrollWidth= window.innerWidth-$(document).width()

來源

2017-07-18 07:34:03

獲取使用JavaScript

回答

相關問題