JavaScript scrollエリアの見えてる部分の高さを取得するには？

Question

scrollエリアの見えてる部分の高さを取得するにはどうしたらいいでしょうか？
見えてる部分というのは、スクロールしていないで状態の画面の表示されているスクロールできる領域の高さです

下記コードですとスクロールバー全体の高さが取得されます
どのように算出するかご存じの方教えていただけないでしょうか？

<script>
window.onload=function(){
document.getElementById("f").onscroll = function(){
s=f.scrollHeight;
alert(s);
}
}
</script>
<div id="f" style="width:100%;height:100%;background-color:red;overflow-y:scroll;-webkit-overflow-scrolling: touch">
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test
</div>

Answer 1

こういうことですかね

var rect = document.querySelector('#f').getBoundingClientRect();
var startY = rect.top > 0 ? rect.top : 0;
var endY = rect.bottom > window.innerHeight ? window.innerHeight : rect.bottom;
alert(endY - startY);

Answer 2

f.clientHeight のことでしょうか。

下記のリンク先の図が分かり安いです。

要素サイズとスクローリング#ジオメトリ