Show div on scroll event

by Thomas Suckow

HTML

<div id="resize">
<div id="body">
  <div class="test"></div>
  <div class="test"></div>
  <div class="test"></div>
  <div class="test"></div>
  <div class="test"></div>
  <div class="test"></div>
</div>
</div>

CSS

.resize-triggers { opacity: 0.5; } 
.resize-triggers, .resize-triggers > div, .contract-trigger:before {
   content: " ";
   display: block;
   position: absolute;
   top: 0;
   left: 0; 
   height: 100%;
   width: 100%;
   overflow: hidden;
}
.resize-triggers > div { background: #eee; overflow: auto; } 
.contract-trigger:before { width: 200%; height: 200%; }

.test {
    background:red;
    height:100px;
    width:100px;
    margin:10px;
}

#body {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #FCC;
    overflow: hidden;
}

body, html {
  height: 100%;
  overflow: hidden;
}

#resize {
 height: 20%;
 width: 50%;
 background: white;
 position: relative;
}

JavaScript

(function () {
		function resetTriggers(element){
			var triggers = element.__resizeTriggers__,
				expand = triggers.firstElementChild,
				contract = triggers.lastElementChild,
				expandChild = expand.firstElementChild;
			contract.scrollLeft = contract.scrollWidth;
			contract.scrollTop = contract.scrollHeight;
			expandChild.style.width = expand.offsetWidth + 1 + 'px';
			expandChild.style.height = expand.offsetHeight + 1 + 'px';
			expand.scrollLeft = expand.scrollWidth;
			expand.scrollTop = expand.scrollHeight;
      console.log(expandChild.offsetHeight, expand.offsetHeight, expand.clientHeight, expand.scrollHeight, expand.scrollTop);
		};
		
		function scrollListener(e){
      $(".test").css('background', '#'+Math.floor(Math.random()*16777215).toString(16));
			resetTriggers(this);
		};
	
	window.addResizeListener = function(element){
			if (!element.__resizeTriggers__) {
				(element.__resizeTriggers__ = document.createElement('div')).className = 'resize-triggers';
				element.__resizeTriggers__.innerHTML = '<div class="expand-trigger"><div></div></div>' +
																						'<div class="contract-trigger"></div>';
				element.appendChild(element.__resizeTriggers__);
				resetTriggers(element);
				element.addEventListener('scroll', scrollListener, true);
			}
	};
})();

window.addResizeListener($('#body')[0]);