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

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

新規登録して質問してみよう
ただいま回答率
85.51%
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オブジェクト」のメソッドとして定義されています。

Q&A

3回答

6291閲覧

jQuery iOS スクロールイベント中に.fadeIn()が発生しない

grapeee

総合スコア8

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オブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/01/24 06:10

編集2022/01/12 10:55

javascript中級者です。
Jqueryで、iPad環境で、スクロール中(タッチパッドから指を離さない)に、fadeInが発生しません。
いろいろ調べてみましたが、touchmoveイベントを使っているのにfadeInの方だけダメで、
慣性スクロールが終了した後にしかfadeInしてくれません。

・fadeOutの方はスクロール中であっても、消えてくれます。
・.fadeIn()の代わりに、.css()などではスクロール中でも変化するので、イベント自体は発生しているようです。
・iOSの環境はバージョン9.3.5です。
・iOS10のバージョンでも同様でした。

よろしくお願いします。

lang

1$(function(){ 2 //固定メニューをスクロールで表示・非表示 3 var fix_menu = $('#js-fix_menu'); 4 //表示する高さ 5 var visible_pos = 700; 6 $(window).on("scroll touchmove", function(){ 7 if($(this).scrollTop() > visible_pos){ 8 fix_menu.fadeIn('fast'); 9 } 10 else{ 11 fix_menu.fadeOut('fast'); 12 } 13 }); 14});

lang

1<body> 2 <div class="hero"> 3 <p>Hero Area</p> 4 </div> 5 <div id="js-fix_menu" class="fix_menu"> 6 <p>Fix Menu</p> 7 </div> 8 <div class="contents"> 9 <p>Page Contents</p> 10 </div> 11</body>

lang

1html{ 2 width: 1024px; 3 margin:0 auto; 4} 5p{ 6 color:#fff; 7 font-size:16px; 8 text-align: center; 9 margin:20px auto 0; 10} 11.hero{ 12 width:1000px; 13 height:300px; 14 background:tomato; 15 margin:0 auto; 16} 17.fix_menu{ 18 display:none; 19 position:fixed; 20 top:0; 21 left:0; 22 right:0; 23 margin:0 auto; 24 width: 100%; 25 height:80px; 26 background: #f75586; 27 box-shadow: 0 3px 5px 0 rgba(0,0,0,.15); 28 z-index: 99; 29} 30.contents{ 31 width:1000px; 32 height:2000px; 33 margin:40px auto; 34 background: #ddd; 35}

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

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

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

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

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

guest

回答3

0

fadeIn処理が何度もやりなおしになっているのではないでしょうか。

$(function(){ //固定メニューをスクロールで表示・非表示 var fix_menu = $('#js-fix_menu'); //表示する高さ var visible_pos = 700; var changeable = true; $(window).on("scroll touchmove", function(){ if(changeable) { changeable = false; if($(this).scrollTop() > visible_pos){ fix_menu.fadeIn('slow',function(){//分かりやすくするためにslowにしています changeable = true ; }); } else{ fix_menu.fadeOut('slow' ,function(){//分かりやすくするためにslowにしています changeable = true ; }); } } }); });

上記のコードでうまくいきましたが、もっとスマートな方法があるかもしれません

サンプル

投稿2017/01/24 08:51

namimon

総合スコア726

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

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

grapeee

2017/01/24 11:04 編集

ご回答ありがとうございます! ですが、上記でも、ipadで確認しますと 解決しないようです…
namimon

2017/01/25 01:15

$(function(){ console.log("start"); //固定メニューをスクロールで表示・非表示 var fix_menu = $('#js-fix_menu'); //表示する高さ var visible_pos = 700; var changeable = true; var scrollStatus = "over"; var status =""; $(window).on("scroll touchmove", function(){ console.log("scroll touchmove") console.log("changeable = " + changeable) console.log("$(this).scrollTop() = " + $(this).scrollTop()) console.log("scrollStatus = " + scrollStatus) console.log("status : " + status) if(changeable === true) { if($(this).scrollTop() > visible_pos && status !== "after fade out"){ changeable = false; console.log("fade in start") fix_menu.fadeIn('slow' , function(){ status ="after fade out"; console.log("fade in END") changeable = true; }); } else if ($(this).scrollTop() < visible_pos && status !== "after fade in" ){ changeable = false; fix_menu.fadeOut('slow' , function (){ status ="after fade in" changeable = true; }); }; } }); }); 上記のコードで、開発者ツールにあるconsoleのログを確認していただいてよろしいでしょうか。
grapeee

2017/01/25 04:02

ありがとうございます。 私の作業環境にて、iPadでコンソールログを取れる信頼できるブラウザの開発ツールがない状況です。 申し訳ありません。 上記、コードの意は理解できました。 ・フェード処理が重複しないようにフラグを2つ用意する この方法でも、問題は解消しないようです。iOSではどうしようもない現象なのかもしれません。 ちなみに以下のような記事を見つけました。この場合は、CSSのpositionの変更に関わることなので、問題が解消されるようです。今回の場合は、displayの変更ということで、そのあたりに問題があるのかもしれないです。 「iOS の Safari で Sticky (スクロール固定) 要素がカタカタしてお困りの時は」 http://wp-e.org/2016/07/15/7096/
namimon

2017/01/25 05:13

<div id="debug"></div> ↑をhtml上に記述して、 console.log内の文字列を一つの変数(var debugtext など)にし、"scroll touchmove"の度に変数を再代入。 document.getElementByID("debub").innerHTML = debugtext ; などではだめですか?
grapeee

2017/01/26 08:52 編集

ありがとうございます!そういう方法があることを知りませんでした。 コンソールログを出力するJSプラグインを使って出力を確認できました。 ここにログを記すと長くなってしまうので、省略ます。 結果的には、表示判定の境界を越えても、 ・タッチパッドを離すまでは、status : after fade in への変更 と fade in ENDの出力 は発生しない。 ・fadeOut()の場合でも、↑上記と同じように、タッチパッドを離すまで、fade out ENDは発生しない。 ・fadeIn()の方は、画面上は、スクロール中は表示されず、はタッチパッドを離すと、フェードもせず、パッと、show()のように表示される。 ・fadeOut()の方は、画面上は、スクロール中でも(タッチパッドを離さなくても)、エフェクトが行われ表示される。 でした。今回のコンソールログでは追えない、もっと内部的な何かということでしょうか。。。
guest

0

fadeIn, fadeOutメソッドの実行中かどうかは:animated疑似セレクタが使えるので、それを利用します。
iOSはfixedの要素を操作する場合に表示にバグが出やすいので、許容したほうが良いかもしれません。

js

1$(function() { 2 //固定メニューをスクロールで表示・非表示 3 var fix_menu = $('#js-fix_menu'); 4 //表示する高さ 5 var visible_pos = 700; 6 $(window).on("scroll touchmove", function() { 7 // fadeIn, fadeOut中の場合は処理中断 8 if(fix_menu.is(':animated')){ 9 return; 10 } 11 if ($(this).scrollTop() > visible_pos) { 12 fix_menu.fadeIn('fast'); 13 } else { 14 fix_menu.fadeOut('fast'); 15 } 16 }); 17}); 18

投稿2017/01/25 06:06

yamato_hikawa

総合スコア2092

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

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

grapeee

2017/01/26 05:00 編集

ご回答ありがとうございます。 上記コードで試してみましたが、解決しないようです。
guest

0

http://shanabrian.com/web/javascript/touch-position.php
こちらでタッチ中の座標をとれるようですがこれで行けませんかね?

投稿2018/07/23 14:52

cheche0830

総合スコア187

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問