scrollTopMax

getScrollTopMax.js

/**
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
  }

  // delete here enable this func for html/body, but need to try both
  // isScrollable(html), isScrollable(body)
  var style_overflow = window.getComputedStyle !== void 0 ?
    getComputedStyle(ele, null).overflow : ele.currentStyle.getAttribute("overflow")
  if (style_overflow === "visible") return false

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


function getScrollTopMax(ele){
  if(ele.scrollTopMax !== void 0) return ele.scrollTopMax
  return isScrollable(ele) ?
    ele.scrollHeight - ele.clientHeight :
    0
}


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