I found that div scroll event can fired continuously in android,but render will lag until scroll end?

I found that div scroll event can fired continuously in some android device,but render will lag until scroll end?

I tested: Samsung Galaxy Nexus

var outerContent = document.getElementById('outer-content');
var demo = document.getElementById('demo');
var tempStr = '';
var index = 0;


for(var i = 0;i < 800;i++){
  tempStr +='<div class="s-item">\
        <div class="item-bg" style="width:100%;">'+(index++) + '</div>\
       </div>';
  }

outerContent.innerHtml = tempStr;


outerContent.onscroll = function(e){
  document.title = e.target.scrollTop; //this will update continously during scroll
  
  
  // element change its color only when scroll stop
  demo.style.background = 'yellow';
  
};

.outer-content{
  width:100%;
  height:500px;
  overflow:auto;
 }

.item-bg{
  height:38px;
  background:green;
 }

#demo{
  width:40px;
  height:40px;
  background:red;
  position:absolute;
  right:0;
  top:0;
  z-index:99;
}

<div id="demo"></div>
<div id="outer-content" class="outer-content"></div>

Is there some solution for such situation?