scrollBar]..의 두께 측정하기..

1)
스크롤바가 가능한 범위를 지정하고, 
만들어진 범위에 스크롤바의 두께를 측정하고 싶었습니다.

...

2)

<div id=x120323_1 style="width:100px; height:100px; overflow:scroll;" ><div style="width:10px; height:100px; overflow:hidden;"></div></div>
<div id=x120323_2 style="width:100px; height:100px; overflow:scroll;" ><div style="width:100px; height:10px; overflow:hidden;"></div></div>
<div id=x120323_3 >결과</div>
<script>

function functionSample120323_4() {

var
  x1e=document.getElementById('x120323_1')
  , x2e=document.getElementById('x120323_2');

document.getElementById('x120323_3').innerHTML=(
  '100-scrollWidth : {first}<br/>'
  +'100-scrollHeight : {second}'
  ).replace(
  /{first}/, (100-x1e.scrollWidth)
  ).replace(
  /{second}/, (100-x2e.scrollHeight)
  )
  ;
  }

functionSample120323_4();

</script>

-- 새 창에 샘플 적용.. --

...

3)

결과

...

방법은,

4)
스크롤바가 만들어질 환경을 만들고,
그 안쪽의 단방향으로 좀더 큰 크기의 element 를 넣고,

반대방향(.. 정확히는, 수선방향으로..)으로는
scrollBar 를 넘치지 않을 작은 범위를 넣은 후,
scrollWidth, 또는 scrollHeight 를 측정하는 방식입니다.

사실, overflow:scroll 을 넣은 시점에서 적용됐다고 봐야 하겠지만,
auto 를 적용한 경우도 가능하겠다..싶어서요.

.. 결과를 보자면

5)
블로그 내에서는 17, 17 이 나오긴 합니다만..

새 창에 띄우면 그 값이 17, 90 이 나옵니다. (IE8 기준.. 다른 브라우져에서는 17, 17 그대로 나옴..)
뭐랄까요.. 스크롤 높이를 적용해주긴 했지만,
display:block 을 적용하지 않아서 그런지, 세로높이는 무시해도 된다..(?)라는 형식의 결과를 보여주더라구요.

뭐.. 한쪽 방향만이라도 스크롤바의 크기를 확인할 수 있었으니 다행입니다.

easyBow killofki@.