仮想キーボードが表示されたときのスクロールを防止します

Question

IOSデバイスなどのIphoneに問題があります。私は入力（その内側の固定ディビジョン）仮想キーボードの表示をフォーカスします。しかし、スクロール全体のビューポートと位置固定divのスクロールもあります。これを解決するには？

位置固定のdivがトップ

に滞在する必要があります。私は私がしたいのか、多くの記事やフォーラム

• Research 2

Research 1

を研究してきました

仮想キーボードは、検索結果のDIVのスクロールが

私のhtmlの許可

を表示されたときに防ぐには、サイト全体をスクロール：

<div class="header"> 
    <button type="button" id="searchButton">Search</button> 
    <div class="search"><!-- Its not visible until user click on search button --> 
     <input type="text" id="search" placeholder="Search here"/> 
    </div> 
</div> 

ここでは私のhtmlであると私は何かを入力したとき、それは私を示唆私の というキーワードに基づいています。結果はDOMに追加されます。

<div class="search-result"><!-- Appended via javascript --> 
    <ul class="suggest-list"> 
     <li>Some item of search result</li> 
    </ul> 
</div> 

とJavaScript：

$(document).on("click", "#searchButton", function(e){ 
    var field = $("#search"); // Gets the search input 
    field.focus(); // Focus the input for virtual keyboard shows up 

}); 

/* cache dom references */ 
var $body = jQuery('body'); 

/* bind events */ 
$(document).on('focus', 'input', function() { 
    $body.addClass('fix'); 
}) 
.on('blur', 'input', function() { 
    $body.removeClass('fix'); 
}); 

そしてSASSファイル：

.header { 
    position: fixed; 
    height: 50px; 
    background: #dadce7; 
    input { 
     height: 100%; 
     width: 100%; 
     border: 0; 
    } 
} 
/* Style of search result */ 
.search-result { 
    position: fixed; 
    top: 50px; 
    bottom: 0; 
    width: 100%; 
    overflow-y: scroll; 
} 
/* Fix the layout */ 
body { 
    &.fix { 
     overflow: hidden; 
     position: fixed; // overflow will be work; 
     width: 100%; 
     height: 100%; 
    } 
} 

Answer 1

これは、特定のポイントにscrollViewをスクロールするネイティブの反応に私のために働きました。これが助けになるかどうかはわかりませんが、そうしたいと思います。

//use this to scroll to the location (Maybe you could constantly set it to the same place to lock it) 
this.refs._scrollView.scrollTo({x: 0, y: 0, animated: true}); 


//then put this in the scrollView 
<ScrollView ref='_scrollView'/>