Scroll on remove

by Jools Chadwick

HTML

<div id="viewer">
  <div id="scalable">
    <div id="report">
      <div id="page1">1</div>
      <div id="page2">2</div>
      <div id="page3">3</div>
      <div id="page4">4</div>
    </div>
    <div id="sizer"></div>
  </div>
</div>

<input id="butt1" type="button" style="position:absolute;left:520px;" value="Remove page 1">
<input id="butt2" type="button" style="position:absolute;left:520px;top:30px;" value="Add page 1">
<input id="butt3" type="button" style="position:absolute;left:520px;top:60px;" value="Resize page 1">
<input id="butt4" type="button" style="position:absolute;left:520px;top:90px;" value="Address page 3">

CSS

#viewer{
  position:absolute;
  width:500px;
  height:500px;
  overflow:auto;
}
#page1,#page2,#page3,#page4{
  height:900px;
  width:600px;
  border: 1px solid black;
  box-sizing:border-box;
}
#sizer{
  height:3960px;
}
#report{
  position:absolute;
  transform: scale(1.1);
  transform-origin: 0px 0px 0px;
}
#scalable{
  overflow:hidden;
}

JavaScript

var report = document.getElementById('report');
var page=[], butt=[];
var pageIdx = 1;
for(var i=1;i<=4;i++){ 
	page[i] =  document.getElementById('page'+i); 
  butt[i] =  document.getElementById('butt'+i); 
}

butt[1].onclick=function(){
  report.removeChild(page[pageIdx]);
}

butt[2].onclick=function(){
	var page2 = document.getElementById('page2');
  report.insertBefore(page[pageIdx],page[pageIdx+1]);
}

var nextHeight = ["1200px","1200px"];
butt[3].onclick=function(){
	var tmp = window.getComputedStyle(page[pageIdx]).height;
  page[pageIdx].style.height = nextHeight[pageIdx];
  nextHeight[pageIdx] = tmp;
}

butt[4].onclick=function(){
	var val = this.value[this.value.length-1];
  this.value = this.value.replace(val,pageIdx)
  for(var i=1;i<=3;i++) butt[i].value = butt[i].value.replace(pageIdx,val)
  pageIdx = parseInt(val,10);
  
}