Chrome scroll

by Jools Chadwick

HTML

<input type="button" value="Tiny">
<input type="button" value="Small">
<input type="button" value="Goldilocks">
<input type="button" value="Big">

<div id="scroller">
  <div id="content"></div>
</div>

CSS

#scroller{
  overflow:auto;
  width:100px;
  height:100px;
}
#content{
  width:100px;
  height:100px;
  background-color: blue;
}

JavaScript

var $content = $('#content');
var $scroller = $('#scroller');
$('input').click(function(){
	$content.height(80+$(this).index()*10);
  
  // Work around
  var vertiScroll = $content.height() > $scroller.height();
  var horizScroll = $content.width() > $scroller.width() - (vertiScroll ? getScrollbarWidth() : 0);
  vertiScroll = $content.height() > $scroller.height() - (horizScroll ? getScrollbarWidth() : 0);
  if(!vertiScroll && !horizScroll){
  	$scroller.css('overflow','hidden');
  }
  else
  {
    	$scroller.css('overflow','');
  }
})


var sbWidth;
function getScrollbarWidth() {
	if(typeof sbWidth==='undefined'){
  // http://stackoverflow.com/a/13382873/514793
    var outer = document.createElement("div");
    outer.style.visibility = "hidden";
    outer.style.width = "100px";
    outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps

    document.body.appendChild(outer);

    var widthNoScroll = outer.offsetWidth;
    // force scrollbars
    outer.style.overflow = "scroll";

    // add innerdiv
    var inner = document.createElement("div");
    inner.style.width = "100%";
    outer.appendChild(inner);        

    var widthWithScroll = inner.offsetWidth;

    // remove divs
    outer.parentNode.removeChild(outer);

    sbWidth = widthNoScroll - widthWithScroll;
    }
    return sbWidth;
}