bootstrap modal scrolls too much when soft keyboard opens

Question

I've searched this question but all I could find was something else. I have a form as a bootstrap 4 modal. When I open it from mobile and tap on an input field, it scrolls down so that the soft keyboard is below the whole modal. It scrolls all the way down, instead of scrolling a little. Whichever input I tap on, it scrolls down so hard, I can only see "submit" and "close" buttons.

      <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>

Here're some screenshots. Before I tap: this is what the modal looks like as soon as I tap after I tap, it's scrolled below the modal

the behavior is not normal I believe

I will be very grateful for any help for I'm just learning.

UPDATE: Experiment has shown, if a button that triggers the modal is on top of the page, modal doesn't scroll like that. If the button is somewhere lower on the page, it scrolls dramatically. Please let me know if you have any ideas what I should do.

Answer 1

Found another question with a similar problem. Since I had the same problem I came across both questions.

The solution was to set overflow to auto on the body, as described in the answer.

html, body {
    overflow: auto;
}

Answer 2

This issue can be resolved by using the scroll event.Code given below.

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

While clicking the button which trigger's the modal popup, store the scroll_y position to another variable name. For example: position_y = scroll_y;

And then set the page scroll to 0 like this inside the click event.

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

Once the modal popup close event triggers, then set the page scroll with position_y like this.

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

It surely works fine.