无法在ember-modal-dialog中实现中心滚动

Question

我使用ember-modal-dialog addon在ember应用程序中设计了一个模态对话框。我想在对话框中实现中心滚动。但是不能这样做。

feed.hbs

<p {{action "toggleModal" photo }}>{{photo.0.numFives}}</p>
            {{#if photo.0.dialogShowing}}
              {{#modal-dialog translucentOverlay=true
                  targetAttachment='none'
                  container-class='centered-scrolling-container'
                  overlay-class='centered-scrolling-overlay'
                  wrapper-class='centered-scrolling-wrapper'}}

              <p>People who like this</p>
              <button class="close" {{action 'dialogClose' photo}}>X</button>
              <img src = "images/shape-line-separator.png" style = "width:340px;height:1px">
              {{#each model.feed.fiver as |fiver|}}
                  <div class="col-sm-12">
                    <div class = "col-sm-4">
                      <div class = "pr">
                        <img src = "{{fiver.dp_url}}" onload = "OnImageLoad(event); "/>
                      </div>  
                    </div>
                    <div class = "col-sm-3"> 
                      <p class="username">{{fiver.full_name}}</p>
                      <p class="userkarma">{{fiver.likes}}  like</p>
                    </div>
                    <img src = "images/shape-line-separator.png">
                  </div>
              {{/each}}
              {{/modal-dialog}}
            {{/if}}

CSS

.centered-scrolling-wrapper {
  position: fixed;
  z-index: 99;
  height: 100vh;
  left: 0;
  right: 0;
  top: 0;
  overflow-y: scroll;
}

.centered-scrolling-overlay {
  display: flex;
  display: -webkit-flex;
  align-items: flex-start;
  -webkit-align-items: flex-start;
  justify-content: center;
  -webkit-justify-content: center;
  min-height: 100vh;
  padding: 10em;
  position: relative;
  height: auto;
}

.centered-scrolling-overlay.translucent {
  background-color: rgba(35, 31, 32, 0.81);; 
}

/* basic modal style (an example, this is not necessary for the centering) */
.centered-scrolling-container {
  position: relative;
  background-color: #343031;;
  border-radius:2px;
  width:360px;
  max-height:250px;
  box-shadow:0 0 0px;
  padding:0px;
  top:25%;
}

在上面的代码中会出现一个对话框，但是它会累积超出最大高度的数据，而不是像中心滚动一样。对话框也没有固定在一个点上。我想在一个点修复对话框当我滚动