Twitter bootstrap 软键盘打开时，引导模式滚动过多

我搜索了这个问题，但我能找到的只是别的东西。 我有一个表格作为引导4模式。 当我从手机上打开它并点击输入字段时，它会向下滚动，这样软键盘就位于整个模式之下。它一直向下滚动，而不是滚动一点。无论我点击哪个输入，它都会向下滚动，我只能看到“提交”和“关闭”按钮

      <div class="portfolio-modal modal fade" id="contactModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
          <div class="lr">
            <div class="rl"></div>
          </div>
        </div>


              <div class="modal-body">
                <!-- Project Details Go Here -->

    <div class="container">

<div class="col-lg-12 text-center">
          <h2>Напишите нам!</h2>
          <h3 class="section-subheading text-muted">Оставьте Ваши контактные данные и пожелания, чтобы мы подобрали для Вас оптимальное путешествие.</h3>
</div>
<div class="row">
   <div id="contact-form">        
   <div class="controls">
                 <div class="col-12">
                 <div class="form-group">
                   <label for="mod_form_name">Ваше имя *</label>
                   <input id="mod_form_name" type="text" class="form-control" required="" placeholder="Как к Вам обращаться?">
                   <div class="help-block with-errors"></div>
                 </div>
                 </div>
                 <div class="col-12">
                 <div class="form-group">
                   <label for="mod_form_tel">Ваш телефон *</label>
                    <input id="mod_form_tel" type="text" class="form-control" required="" placeholder="Введите Ваш телефон">
                   <div class="help-block with-errors"></div>
                 </div>
                 </div>
                 <div class="col-12">
                 <div class="form-group">
                   <label for="mod_form_email">Ваш Email </label>
                    <input id="mod_form_email" type="email" class="form-control" placeholder="Введите Ваш Email" data-error="Требуется действующее электронное письмо.">
                   <div class="help-block with-errors"></div>
                 </div>
                 </div>
                 <div class="col-md-12">
                 <div class="form-group">
                     <label for="mod_form_message">Ваше сообщение: </label>
                    <textarea id="mod_form_message" name="text_comment" class="form-control" placeholder="Пожалуйста, оставьте сообщение" rows="4" required="" data-error="Пожалуйста, оставьте нам сообщение."></textarea>
                   <div class="help-block with-errors"></div>
                 </div>
                 <div class="mod_messages"></div>
               </div>          
               <div class="col-md-12 text-center">
                  <input  class="btn btn-primary" type="submit" name="btn_submit" id="button_modalcontacts" value="Отправить сообщение">
               </div>
                 <button class="btn mx-auto" data-dismiss="modal" type="button">
                  <i class="fas fa-times"></i>
                  Закрыть</button>
</div> </div> </div> </div> </div> </div>  </div>  </div>

Напишите нам!
Оставьте Ваши контактные данные и пожелания, чтобы мы подобрали для Вас оптимальное путешествие.
Ваше имя *
Ваш телефон *
电子邮件
Ваше сообщение: 
Закрыть

这里有一些截图。 在我点击之前： 我一敲

我相信这种行为是不正常的

我将非常感谢任何帮助，因为我只是在学习

更新： 实验表明，如果触发模式的按钮位于页面顶部，则模式不会像那样滚动。 如果按钮位于页面下方的某个位置，则会显著滚动。

---

如果您对我应该做什么有任何想法，请告诉我。

这个问题可以通过使用滚动事件来解决。下面给出了代码

window.addEventListener("scroll", function () {
    scroll_y = this.scrollY;
});

单击触发模式弹出窗口的按钮时，将滚动位置存储到另一个变量名。 例如： 位置y=滚动y

然后在click事件中将页面滚动设置为0，如下所示

$('html, body').scrollTop(0);

一旦模式弹出关闭事件触发，然后使用如下位置设置页面滚动

$('html, body').scrollTop(position_y);

---

它当然可以正常工作。

要验证这是否是正常行为，请查看手机上的此页面以查看发生的效果。。。我已经在他们的示例中添加了一个输入，并尝试了它，它在我的设备上正常工作，滚动效果很好。@AkberIqbal通过实验发现，如果模式触发器按钮位于页面顶部，它工作正常，但如果它接近底部，则会发生滚动。我需要的不仅仅是上面的按钮显然。。。如果您有任何想法，请告诉我。如果您可以添加完整的工作代码来复制您的问题，那么将更容易help@AkberIqbal我已经发布了一个新的问题与澄清的问题和完整的代码，请随意看看