软键盘打开时引导模式滚动太多

Question

我已经搜索过这个问题，但我只能找到其他东西。 我有一个作为 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>

这里有一些截图。 在我点击之前： this is what the modal looks like 我一点击 after I tap, it's scrolled below the modal

我认为这种行为不正常

对于我刚刚学习的任何帮助，我将不胜感激。

更新： 实验表明，如果触发模态的按钮位于页面顶部，则模态不会像那样滚动。 如果按钮位于页面下方的某个位置，它会急剧滚动。 如果您有任何想法我应该怎么做，请告诉我。

Answer 1

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

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

在单击触发模式弹出的按钮时，将 scroll_y 位置存储到另一个变量名。 例如： position_y = scroll_y;

然后在点击事件中像这样设置页面滚动为0。

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

一旦模态弹出关闭事件触发，然后像这样使用 position_y 设置页面滚动。

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

它确实可以正常工作。

Answer 2

发现 another question 有类似问题。由于我遇到了同样的问题，所以我遇到了这两个问题。

解决方案是在正文上将overflow 设置为auto，如答案中所述。

html, body {
    overflow: auto;
}