26
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

iOS Safariで position:fixedしている要素内のinputにfocusすると、ページトップへスクロールしてしまう挙動を解決する

Last updated at Posted at 2017-03-17

position:fixedしている要素内のinputにフォーカスが入ると、ページトップへスクロールしてしまう というiOS Safariの困った挙動を解決した際の知見を共有します。

参考リンク

コード

style.css
@media screen and (max-width: 768px) {
    html, body {
        -webkit-overflow-scrolling: touch !important;
        overflow: auto;
        height: 100%;
    }
    body {
        position: relative;
        overflow-x: hidden;
        min-height: 100%;
    }
}

これで解決しました。例えばpositiion:fixedしているヘッダー内の検索ボックスなどにフォーカスが当たっても、スクロールが発生しません。

26
19
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
26
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?