3000


スマートフォンサイトを制作していて発生した問題です。

headerタグにposition:fixed;を指定しスクロール時に画面上部に常に固定配置されるヘッダーを作成しました。

そのヘッダーにinputを利用して検索ボックスを設置したのですがiOS8のsafariで検索ボックスにフォーカスをあてると、htmlの構造上ではinput要素がコンテンツより上部に存在するためか一番上まで自動的にスクロールしてしまうという問題が発生しました。

[code]

    <header style="position:fixed;">
      <input type="search">
    </header>
    aaa<br>
    aaa<br>
    aaa<br>
    ...
    
[/code]

こちらに実際にテストができるサンプルページを作成しましたので是非iPhoneなどで閲覧していただければと思います。

[サンプルページ](https://dl.dropboxusercontent.com/u/39832188/test.html)

ちなみに、古い機種ですがArrowsESという機種（Android2.3）では、自動的にスクロールが発生するというようなことはありませんでした。

この問題を解消する方法がわかる方いらっしゃいましたら、是非アドバイスお願い致します。


CC BY-SA 3.0
2015-01-03T09:55:10.580
2979
2016-07-10T09:53:22.413
2015-01-03T10:37:18.487
3639
5840
question
ios css safari
iOS8でposition:fixedなheaderに付けたinputにフォーカスを当てると一番上までスクロールしてしまう


以前のiOSだと、タッチキーボードが出現してスクロール外に動いてしまっていた問題ですね。現在の実装だと、input要素にフォーカスがあたると強制的に`position:absolute`になるようです。以下のように、フォーカスを検知して元の位置に戻すことは可能です。

[code]

    $(function(){
      if (Modernizr.touch) {
        $(document)
        .on('focus', 'header > input', function(e) {
          var pos = $(window).scrollTop();
          $('html, body').scrollTop(pos);
          $('header').css({ top: pos });
        })
        .on('blur', 'header > input', function(e) {
          $('header').css({ top: 0 });
        });
      }
    });
    
[/code]

ただ、一瞬スクロールが見えてしまうので、メニュー要素を全画面化するなど、デザイン上の工夫が必要かもしれません。


CC BY-SA 3.0
2015-01-03T12:05:17.053
2984
2015-01-03T12:05:17.053
390
2979
answer


DOMの変更が可能な前提で、別解も挙げておきます。

[code]

    <header>
      <input type="search">
    </header>
    <section class="scroll">
      aaa<br>
      aaa<br>
      aaa<br>
    </section>
    
[/code]

のように、スクロールしたい部分を`body`の直下から`section`などの下に移します。その上で、下記のように要素内でスクロールさせるようにすればOKです。この場合
`header` は最初から `position:absolute` としているのと実質的には変わりません。

[code]

    .scroll {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      padding-top: 40px;
      overflow-y: scroll;
    }
    
[/code]


CC BY-SA 3.0
2015-01-03T15:43:48.497
3000
2015-01-03T15:43:48.497
390
2979
answer


こちらのExampleではうまいこと回避しているようです。  
<https://cdn.rawgit.com/AlexanderOMara/8747f59b6450878e78c7/raw/df10d9ac92abd14442111f7428badc4ccf51e231/index.html>

参照先  
<https://stackoverflow.com/questions/29001977/safari-in-ios8-is-scrolling-
screen-when-fixed-elements-get-focus>


CC BY-SA 3.0
2016-07-10T09:53:22.413
27502
2016-07-10T09:53:22.413
2017-05-23T12:38:55.250
-1
8351
2979
answer