javascript - 专注于模式内的输入会导致 ios 向下滚动

Question

我遇到了模态框内的输入并提出了问题。

当用户打开模式时，它会覆盖整个页面，并设置为高 z-index 和绝对位置。一旦用户专注于模式内的输入，在 iOS 上，整个页面就会由于某种原因向下滚动。

我认为 ios 的行为是将输入字段向上滚动一点，以便为键盘留出一些空间，并且由于我的模式的 html 位于页面底部，它会尝试滚动到该位置。

我尝试过在 body 上尝试 overflow-y:hidden ，并在发生 touchmove 时将事件监听器附加到 event.preventDefault() 上，当模态打开时，这些会阻止页面滚动，即使在 ios 上用户也无法滚动，但一旦他们专注于输入，所有这些似乎都会被忽略。

Answer 1

This answer为我工作。您需要做的另一件事是使输入中的文本大小至少为 16px，否则 iOS 会强制它执行烦人的“放大”功能。

如果您不想单击链接，也可以粘贴。

//Set 2 global variables
var scrollTopPosition = 0;
var lastKnownScrollTopPosition = 0;

//when the document loads
$(document).ready(function(){

  //this only runs on the right platform -- this step is not necessary, it should work on all platforms
  if( navigator.userAgent.match(/iPhone|iPad|iPod/i) ) {

    //There is some css below that applies here
    $('body').addClass('platform-ios');

    //As you scroll, record the scrolltop position in global variable
    $(window).scroll(function () {
      scrollTopPosition = $(document).scrollTop();
    });

    //when the modal displays, set the top of the (now fixed position) body to force it to the stay in the same place
    $('.modal').on('show.bs.modal', function () {

      //scroll position is position, but top is negative
      $('body').css('top', (scrollTopPosition * -1));

      //save this number for later
      lastKnownScrollTopPosition = scrollTopPosition;
    });

    //on modal hide
    $('.modal').on('hidden.bs.modal', function () {

      //force scroll the body back down to the right spot (you cannot just use scrollTopPosition, because it gets set to zero when the position of the body is changed by bootstrap
      $('body').scrollTop(lastKnownScrollTopPosition);
    });
  }
});

CSS:

// You probably already have this, but just in case you don't
body.modal-open {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
//only on this platform does it need to be fixed as well
body.platform-ios.modal-open {
  position: fixed;
}