ブラウザのスクロールバーのサイズを計算する

ブラウザのスクロールバーのサイズを計算する方法を尋ねる別の質問があります。ブラウザのスクロールバーのサイズを計算する

私の質問は、npmパッケージscrollbar-wdithで実装されたソリューションについてです。誰かがそれがなぜ機能するのか説明できますか？

scrollbarWidth = null 

getScrollbarWidth = (recalculate = false) -> 
    return scrollbarWidth if scrollbarWidth? and not recalculate 

    return null if document.readyState is 'loading' 

    div1 = document.createElement 'div' 
    div2 = document.createElement 'div' 

    div1.style.width = div2.style.width = div1.style.height = div2.style.height = '100px' 
    div1.style.overflow = 'scroll' 
    div2.style.overflow = 'hidden' 

    document.body.appendChild div1 
    document.body.appendChild div2 

    scrollbarWidth = Math.abs div1.scrollHeight - div2.scrollHeight 

    document.body.removeChild div1 
    document.body.removeChild div2 

    scrollbarWidth

出典

2016-05-26 kalu

スクロールバーの高さに基づいて 'scrollHeight'が変更されるためです。 –

ダウンボートは何ですか？ – kalu

有権者ではありませんが、あなたが理解していない部分は非常に明確ではありません。 –

ここに私がやったことだ：参考

、ここに関連するコード（.coffee）があります。コードの要点をとり、少し簡略化しました。

<html> 
<head> 
</head> 
<body> 
</body> 
<script> 
    var scrollbarWidth; 

    scrollbarWidth = null; 

    getScrollbarWidth = function(recalculate) { 
    var div1, div2; 
    div1 = document.createElement('div'); 
    div2 = document.createElement('div'); 
    div1.id = "div1"; 
    div2.id = "div2"; 
    div1.style.width = div2.style.width = div1.style.height = div2.style.height = '100px'; 
    div1.style.overflow = 'scroll'; 
    div2.style.overflow = 'hidden'; 
    document.body.appendChild(div1); 
    document.body.appendChild(div2); 
    scrollbarWidth = Math.abs(div1.scrollHeight - div2.scrollHeight); 
    alert(scrollbarWidth); 
    return scrollbarWidth; 
    }; 

    getScrollbarWidth(); 

</script> 
<html>

これで、要素を使いこなすことができます。

2つの同じdivがスクロールバーとスクロールバーの両方で作成され、スクロールバー（要素とパディングのみ）を無視する両方のscrollHeightプロパティをクエリします。ここに - http://www.w3schools.com/jsref/prop_element_scrollheight.asp

scrollHeightプロパティは、全体のパディングを含む画素内の要素の高さではなく、国境、スクロールバーやマージンを返します。（要素の一つは、スクロールバーを有し、他の一つはないので）結局のところ

scrollHeightsの差は、DIV2 scrollHeight = 100 PX（=高さ）、

を必要スクロールバーの高さをもたらしますDIV1のscrollHeightのみ83pxだったので、クロムは高さのスクロールバーを持っていながら、17px

は、それはあなたに理にかなっている場合は、私に教えてください

出典

2016-05-26 01:30:03

意味があります。私は混乱していたと思う - コードが垂直スクロールバーの高さを測定していると思った...水平スクロールバーを見るのに慣れていない。 – kalu

ここも--scrollbarのCSSのカスタムプロパティに、スクロールバーのピクセルサイズを設定し、シンプルなスニップです（もしあなたのブラウザは仕様をサポートしています）。

(function(node, body){ 
    node.style.display = 'inline-block'; 
    node.style.position = 'absolute'; 
    node.style.height = '0'; 
    node.style.overflow = 'scroll'; 
    body.appendChild(node); 
    body.style.setProperty('--scrollbar', node.offsetWidth + 'px'); 
    body.removeChild(node); 
})(document.createElement('scrollbartester'), document.body);

出典

2017-06-29 05:01:32 csuwldcat

ブラウザのスクロールバーのサイズを計算する

答えて

関連する問題