モーダル内の入力に焦点を当てると、スクロールダウンする

Question

モーダル内の入力で問題が発生しました。

ユーザーがモーダルを開くと、ページ全体が表示され、z軸のインデックスが高く、絶対位置が設定されます。ユーザーがモーダル内の入力に集中すると、何らかの理由でページ全体がスクロールします。

キーボードのスペースを許すために入力フィールドを少し上にスクロールして、私のモーダルのhtmlがページの一番下にあるので、それをスクロールしようとします。

私は体にoverflow-y: hiddenを試してみましたが、event.preventDefault()touchmove一度occuresのそれにイベントリスナーを付け、モーダルが開いている間、でもiOSユーザーに、スクロールからこれらの停止ページをスクロールすることはできませんが、彼らは、入力に焦点を当てたらしていますこれらのすべては無視されるようです。

Answer 1

This answer私のために働いた。あなたがする必要があるもう一つのことは、入力のテキストサイズを少なくとも16ピクセルにすることです。さもなければ、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; 
}