scrollTopMaxを取得する JavaScript

element.scrollTopMaxは現在Firefoxだけにあるプロパティで、要素の最大スクロール可能量を返す。読み取り専用。window.scrollMaxYのelement版。

これは他のブラウザなら
element.scrollHeight - element.clientHeight
で求められると思っていたが違った。
スクロール可能なのは、スタイルにoverflow:visible以外が設定されているときで、visibleが設定、あるいは初期値がvisibleのときにはその要素はスクロールできない。

つまり、次の2つの条件を満たすときのみ要素はスクロールできる

1. element.scrollHeight - element.clientHeightの戻り値がある（0でない）
2. スタイルがoverflow:visibleではない

*1 ただしhtml, bodyは除く
*2 残念ながらIEだけこれでは不十分だった。
IEではoverflow:visibleやautoにした要素でも、scrollHeight - clientHeightの戻り値が0より大きくなってしまうことがある。よって実際にスクロール可能か試すしかないようだ。

getScrollTopMax

/**
getScrollTopMax
@test
https://developer.mozilla.org/ja/docs/DOM/element.clientHeight
*/

var target = document.getElementById("idDiv")
target.scrollHeight // 401
target.clientHeight // 102
target.scrollTopMax // 299


var target2 = document.getElementById("offsetContainer")
target2.scrollHeight // 224
target2.clientHeight // 198
target2.scrollTopMax //   0 <- not scrollable
 

function isScrollable(ele){ // except html, body
  if(ele.scrollTop || ele.scrollLeft){
    return true
  }

  var style_overflow = window.getComputedStyle !== void 0 ?
    getComputedStyle(ele, null).overflow : ele.currentStyle.getAttribute("overflow")
  if (style_overflow === "visible") return false

  // for IE
  ele.scrollLeft += 1
  ele.scrollTop += 1
  return ele.scrollTop || ele.scrollLeft ?
    (ele.scrollLeft += -1, ele.scrollTop += -1, true) : false
}

function getScrollTopMax(ele){
  return isScrollable(ele) ?
    ele.scrollHeight - ele.clientHeight :
    0
}


getScrollTopMax(target)  // 299
getScrollTopMax(target2) // 0

isScrollableは別の名前にしたほうがいいかな？