iScroll cuts off content

Question

I was trying to apply iScroll to my scrolling item however i dont understand the way it works.

• it cuts off bottom content
• it makes additional margin top for some reason

this is the code

var _scroll = new IScroll('.helper', {
    mouseWheel: true,
    scrollbars: true
});

div {
 box-sizing:border-box;
}

.main {
 width:600px;
 margin:20px auto;
 height:300px;
 background:crimson;
 border:solid 1px #000;
 padding:10px;
}

.helper {
 height:100%;
 position:relative;
 overflow:hidden;
}

.scroller {
 background:cornflowerblue;
}

.box {
 height:50px;
 background:#ccc;
 border:solid 1px #000;
 margin:10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>

<div class="main">
 
 <div class="helper">
  
  <div class="scroller">
  
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   
  </div>
  
 </div>
 
</div>

Maybe someone could help me with this one.