JavaScriptの要素位置の距離：計算幅クライアント＆スクロール＆オフセット＆のMouseEvent＆スクロールバー

クライアント：

clientWidth / clientHeight：

• 要素の幅/高さの中では、とだけあってコンテンツをパディング含まれ、スクロールバーが含まれていません
• clientWidth =コンテンツ幅+パディング - スクロールバーの幅 
• clientHeight =コンテンツの高さ+パディング - スクロールバーの高さ

clientLeft /のclientTop：

テキストの方向が右から左になり、スクロールバー（方向：RTL）要素の左境界線の幅、スクロールバーの幅を追加する必要があります

clientLeft =ボーダー幅+スクロールバーの幅（インライン要素の値が0であるため）

clientTop = borderTop

 

ブラウザまたは要素スクロールバーの幅を計算します：

elem.offsetWidth - elem.borderLeftWidth - elem.borderRightWidth - elem.clientWidth

エクスポートデフォルトのクラスmyutils {
      // のスクロールバー要素の幅を計算
     静的getScrollWidth（elemOrSelect）{
         IF（elemOrSelect！）リターン;
         IF（elemOrSelect.constructor ===文字列）elemOrSelect = document.querySelector（elemOrSelectを）;
         // パラメータまたはHTML幅のデフォルトブラウザのスクロールバーボディ取得
        IF（/ BODY | HTML / .TEST（elemOrSelect.nodeNameを））{
            elemOrSelect.style.padding = 0 ;
            elemOrSelect.style.margin = 0 ;
            返す window.innerWidth - elemOrSelect.clientWidthを。
        }
        // 互換性のある
        VARのスタイル= elemOrSelect.currentStyle？elemOrSelect.currentStyle：getComputedStyle（elemOrSelect）.style;
         // 取得する要素のスクロールバーの幅
        VAR幅=
            elemOrSelect.offsetWidth
            - Math.ceil（parseFloatは（style.borderLeftWidth））
             - Math.ceil（parseFloatは（style.borderRightWidth））
             - elemOrSelect.clientWidth。
        戻り値の幅;
    }
}

 

offsetWidth / offsetHeight / offsetLeft / offsetTop：

offsetWidth / offsetHeight：コンテンツ+パディング+ボーダー（スクロールバーを備えました）

offsetLeft：

offsetTop：

古典的な写真：