【iOS】画面上にfixedされた検索フォームがフォーカスされるとトップに強制スクロールされるのを防ぐ方法がわかりません。

###前提

類似の質問に対しての回答を参考にしても解決できなかったため質問させていただきます。

参考:position:fixedしている要素内のinputにフォーカスが入ると、ページトップへスクロールしてしまう

参考:ios8でpositionfixedなheaderに付けたinputにフォーカスを当てると一番上までスクロールしてしまう

###問題

①fixedしたheaderの中にボタンを設置
②ヘッダーの高さ分下にずらし、検索フォームをfixed。通常時はdisplay:noneで隠れている
③①のボタンをクリックすると、イベントが発火し、検索フォームが表示される（jquery）
④検索フォームがフォーカスされる（アクティブになる）と画面上まで強制スクロールされる

###実装しているコード

wordpressで構築しているサイトで、下記のようなコードを実装しています。（最低限のコードだけ記載しています）

####HTML

php
1<div id="search">
2<form role="search" method="get" id="searchform" action="<?php echo home_url(); ?>/search">
3    <label class="hidden" for="q">
4        <?php _e('', 'kubrick'); ?>
5    </label>
6    <input type="search" value="<?php the_search_query(); ?>" name="q" id="q" placeholder="検索ワードを入力" />
7    <button type="submit" id="searchsubmit" alt="検索" value="<?php _e('Search', 'kubrick'); ?>">
8        <i class="fa fa-search" aria-hidden="true"></i>
9    </button>
10</form>
11</div>

####CSS

css
1#search {
2    position: fixed;
3    left: 0;
4    right: 0;
5    top: 60px;
6    z-index: 999;
7}

####本番サイトで実装しているコードと具体的なカスタマイズ内容

参考:https://moriawase.net/fixed-header-slide-menu

###理想のサイト

下記のサイトのような挙動にできればと思っております。

ノマド的節約術

朝日新聞デジタル

特に、ノマド的節約術さんの挙動が素晴らしく、ぜひ参考にしたいと考えております。

しかし、コードを分析しても、特にそれらしいコードを見つけることができませんでした。
おそらく、jqueryで制御しているのだと思いますが。。

###お知恵を拝借したいこと

今回お知恵を拝借したいことは、画面上部にfixedされたinput要素（もしくは、fixedされた要素内のinput要素）がfocusされた時の強制スクロールを止める方法です。

冒頭に記載した参考サイトを見ても解決しないため、HTML,CSSで制御するのは難しいのではないかなと思っています。

HTML,CSS,jqueryをいじって解決できるのであれば、それが1番ですが、JSライブラリや、何かヒントになるページをご紹介いただければと思っております。

何卒よろしくお願い申し上げます。

行動規範の内容に同意します

回答2件

サイト拝見しました。
嫌な挙動ですねこれ。

一点気がついたのですが、モーダル表示中にもコンテンツがスクロール出来ていますね。
試しにスクロール出来ないように設定してみてはいかがでしょうか？

     $(obj).on('touchmove.noScroll', function(e) {
        e.preventDefault();
    });

私はよくスマホでのモーダル表示では上記を使用してスクロールを止めています。
もしかすると、これで解決できればと思って。

(obj)にはwindowなりｈｔｍｌなり構造に合わせてご利用下さい。

上記のスクロール禁止解除はこれでできます。

 $(obj).off('.noScroll');

投稿2017/02/28 04:03

shaak

総合スコア607

chef

2017/02/28 05:53

ご回答いただき、ありがとうございます！ご紹介いただいたコードは、検索フォームが表示された時に一緒に表示される黒いレイヤー（背景。body要素よりz-indexの値が大きい）に指定しており、コンテンツのスクロールを禁止しているはずなんですが、もしかして上手く適用されていないのでしょうか。。（そういえば、時々思いがけない挙動をしている気がします）取り急ぎ、ご回答を参考に下記のことを試しました。 ①レイヤーではなくbody要素にnoScrollイベントを適用 ②①と同じ要領で検索フォームにも適用 ③①と同じ要領でinput要素にも適用ただ、やはり強制的に画面上までスクロールされてしまう（position:absoluteが上書きで強制的に適用される？）ようで、解決には至りませんでした。。

shaak

2017/02/28 06:19

お役にたてなくてゴメンナサイ。以前この問題でハマった覚えがあるのですがソースが探し出せませんでした。確かhtml構造そのものを変えて対処したと記憶しています。こちらのサイトが参考になるのではと思いました。 https://blog.mismithportfolio.com/web/20150529scrollfixed

chef

2017/02/28 08:21

あ、でも、1つ別の問題があったことに気づけました！ご紹介いただいたコード、左側のメニューを表示するボタンの方には実装してたんですが、右側の検索フォームを表示するボタンの方には実装していませんでした。。今まで、イベントの発火を確かめる時、左側のボタンをクリックしてから右側のボタンを押していたので、イベントがそのまま引き継がれていたようです。良い気づきになりました！ありがとうございます！

行動規範の内容に同意します