スティッキーバーの入力にフォーカスを当ててページをスクロールする

Question

私は次のような状況に陥っています。 スティッキーヘッダーの応答先サイト、スティッキーヘッダーおよび検索入力。

問題は、私はページをスクロールして検索入力をクリックしたとき、それは、入力フィールドに焦点を当て、携帯電話のキーボードを表示し、入力フィールドがであるDOM（にある場合にページをスクロールし、電話&タブレットに表示されます私のHTMLコードの始まり）

スクロールするのを防ぐ方法は、検索バーに焦点を当てていますか？ 私はそれをはっきりと説明しても分かりません。だから私は問題のビデオを添付している - https://youtu.be/7UOiDmEvp4U

Answer 1

それは、iOS 8+

で固定位置にバグがここにあり、私は問題を解決するために使用するものですされていることになります。ご返信用https://gist.github.com/AlexanderOMara/8747f59b6450878e78c7

Answer 2

私はあなたがe.preventDefault();を設定する必要があると思う。下のコードが役立つかもしれません。

$(function() { 
 
    $('nav').on('click', '.search', function(e) { 
 
    e.preventDefault(); 
 
    var $el = $(e.currentTarget); 
 
    
 
    $el.find('input').addClass('large').focus(); 
 
    }); 
 
})

body { 
 
    height: 600px; 
 
} 
 
nav { 
 
    position: fixed; 
 
    top: 0; 
 
    left:0; 
 
    background: #333; 
 
    color: #fff; 
 
    width: 100%; 
 
    padding: 20px; 
 
} 
 
.search .fa { 
 
    cursor: pointer; 
 
} 
 
.search input { 
 
    width: 50px; 
 
    transition: all 0.3s; 
 
} 
 
.search input.large { 
 
    width: 200px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<nav> 
 
    <div class="search"><i class="fa fa-search"></i> 
 
    <input> 
 
    </div> 
 
</nav>