質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.53%

  • JavaScript

    16321questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    8913questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    6665questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5743questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • iOS

    3980questions

    iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,394

chef

score 6

前提

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

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

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

問題

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

実装しているコード

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

HTML

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

CSS

#search {
    position: fixed;
    left: 0;
    right: 0;
    top: 60px;
    z-index: 999;
}

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

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

理想のサイト

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

ノマド的節約術

朝日新聞デジタル

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

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

お知恵を拝借したいこと

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

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

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

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

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/28 14:53

    ご回答いただき、ありがとうございます!
    ご紹介いただいたコードは、検索フォームが表示された時に一緒に表示される黒いレイヤー(背景。body要素よりz-indexの値が大きい)に指定しており、コンテンツのスクロールを禁止しているはずなんですが、もしかして上手く適用されていないのでしょうか。。(そういえば、時々思いがけない挙動をしている気がします)

    取り急ぎ、ご回答を参考に下記のことを試しました。
    ①レイヤーではなくbody要素にnoScrollイベントを適用
    ②①と同じ要領で検索フォームにも適用
    ③①と同じ要領でinput要素にも適用

    ただ、やはり強制的に画面上までスクロールされてしまう(position:absoluteが上書きで強制的に適用される?)ようで、解決には至りませんでした。。

    キャンセル

  • 2017/02/28 15:19

    お役にたてなくてゴメンナサイ。
    以前この問題でハマった覚えがあるのですがソースが探し出せませんでした。
    確かhtml構造そのものを変えて対処したと記憶しています。

    こちらのサイトが参考になるのではと思いました。

    https://blog.mismithportfolio.com/web/20150529scrollfixed

    キャンセル

  • 2017/02/28 17:21

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

    キャンセル

check解決した方法

0

所有のiOS端末での確認ですが、最近のアップデートの影響なのか、ページの1番上まで強制スクロールしなくなりました。
focusした時に、fixedされた要素分上にズレるようですが、ほとんど気にならないレベルでしたので、解決済みとさせていただきます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.53%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16321questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    8913questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    6665questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5743questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • iOS

    3980questions

    iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

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