jQueryで、スクロールバーの幅を測りたい（ただし、bodyの内側のスクロールバーです）

Question

前提・実現したいこと

jQueryを使っています。ご意見、ご回答宜しくお願い致します。

「button」のクリック
↓
「.outer」のスクロールバーの幅を測り、
↓
「.target」にその幅でボーダーを加えたい

のですが、どうしたらいいでしょうか？

<button>button</button>

<div class="outer">
  <div class="target">target</div>
</div>

body {
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.outer {
    background: springgreen;
    width: 100%;
    height: 200px;
    overflow-y: scroll;
}
.target {
    background: sandybrown;
}

###試したこと
イメージとして下記の流れになると思います。
もちろん下記は「.outer」でなく「body」の幅が対象になっているのでできないのですが…
どのようにすればいいでしょうか？

$( function(){
  $( 'button' ).click( function(){
    $( '.target' ).css( "border-right", "solid "+( window.innerWidth-document.body.clientWidth )+"px red" );
  });
});

よろしければお試しくださいまし → https://jsfiddle.net/qb4zyamu/

Answer 1

図のように、offsetWidth から clientWidth とボーダー幅を引けば出ます(リンク先参照)。
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth
https://developer.mozilla.org/ja/docs/Web/API/Element/clientWidth

  var outer = $('.outer')[0]; 
  var style = getComputedStyle(outer);
  var result = outer.offsetWidth - (outer.clientWidth + parseInt(style.borderLeftWidth, 10) + parseInt(style.borderRightWidth, 10));
  $('.target').css('border-right-width', result);

jQuery なら .innerWidth() から clientWidth を引くだけです。

  var result = $('.outer').innerWidth() - $('.outer')[0].clientWidth;

https://api.jquery.com/innerWidth/

Comments

[bananna]

どうもありがとうございます！