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

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

新規登録して質問してみよう
ただいま回答率
85.50%
iOS

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

JavaScript

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

jQuery

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

HTML

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

CSS

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

Q&A

解決済

2回答

6495閲覧

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

chef

総合スコア15

iOS

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

JavaScript

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

jQuery

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

HTML

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

CSS

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

0グッド

1クリップ

投稿2017/02/27 12:09

編集2017/03/02 12:03

###前提

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

参考: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ライブラリや、何かヒントになるページをご紹介いただければと思っております。

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

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

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

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

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

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

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

0

自己解決

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

投稿2017/04/19 07:12

chef

総合スコア15

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問