Question

我跑过去并在模态中输入输入。

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

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

我已经尝试了overflow-y: hidden on body并在event.preventDefault()发生touchmove时将事件监听器附加到{{1}}，而modal已打开，这些停止页面滚动，即使是ios用户也可以＆＃39; t滚动，但一旦他们专注于输入，所有这些似乎都会被忽略。

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

专注于模态内部的输入会导致ios向下滚动

1 个答案: