vue js modal pivotY isn't working when with big amount of data

i tried to implement vue js modal. here is my code.

  <modal name="caronoff-historymodal" :scrollable="true" height="auto"  pivotY="0.2">
  <div class="modal-box">
    <div class="col-xs-12 col-md-12 col-lg-12 modaltopbar">
      <div class="col-xs-6 col-md-6 col-lg-6 modal-titlecontainer">
        <span class="modal-title">Car On/Off History</span>
      </div>
      <div class="col-xs-6 col-md-6 col-lg-6 close-buttoncontainer">
        <!--<button type="button" name="button" class="btn btn-default close-btn">Close</button>-->
        <i v-on:click="hide()" class="fa fa-times close-btn"></i>
      </div>
    </div>
    <div class="col-xs-12 col-md-12 col-lg-12 modalbody">
      <div class="col-xs-12 col-md-12 col-lg-12 historyvalue" v-for="(item,i) in modalvalue">
        <div class="col-xs-1 col-md-1 col-lg-1 slno">.</div>
        <div class="col-xs-11 col-md-11 col-lg-11 databody">
          <div class="data"></div>
          <div class="subdata"></div>
        </div>
      </div>
    </div>
  </div>
</modal>

my problem is pivotY works fine when amount of rows showed in the modal are less than window size. but when it crosses the window, the modal topbar starts from the very top. how can i make modal start from a fixed position? i tried different position attribute for modal-box class but nothing seem to work.

via Chebli Mohamed