質問編集履歴

1 懸念点について補足を追加

gzrita

gzrita score 223

2017/09/15 15:40  投稿

Android版Chromeで、スムーススクロールが行えない
###前提・実現したいこと
ブラウザを通して利用できる、スマートフォン用の社内ツールを制作しています。
概要としては、スマートフォン用リーダーで読み取った内容を動的に追加し、閲覧できるツールです。
その中で、情報が追加された際「いま追加された要素」がどこにあるのか分かるよう、
jQueryを用いたスムーススクロールで、追加要素までスクロールする処理を考えています。
しかし、その動作についてPC/iOS(Safari/iOS版Chrome)では正常に動作するにも関わらず、
Android版Chromeでのみ動作せず、画面をスクロールさせることができません。
###発生している問題・エラーメッセージ
まず、必要と思われる場所のソースコードを質問用に修正を行った上で記載させて頂きます。
```Javascript
//バーコード読み取りを感知すると、以下の関数を処理します。
//code … 読み取っているコードです。
function barcode_scan(code){
 //結果を表示するための器として要素を追加します。
 $('#result').append('<article class="item">検索中です...</article>');
 //追加した要素の情報を $ti に保存します。
 var $ti = $('#result .item:last');
 //コードから情報を検索する処理です
 $.ajax({
   url: 'http://XXXXX.YYYYY/ZZZZZ/sample_api.php',
   type: 'POST',
   data: {
     s: code
   }
 })
 .done(function(data){
   //追加した情報の場所へスムーススクロールを試みている場所です
   var position = $ti.offset();
   $("html,body").animate({scrollTop:position.top},300,"swing");
   //この後に $ti の要素内に結果の内容を出力する処理を書きます(省略)
 }
 .fail(function(){
   //エラー処理(省略)
 }
```
PC/iOSでは`$("html,body").animate({scrollTop:position.top},300,"swing");`の箇所で
該当の要素までスクロールを行うのですが、Android版Chromeでのみ正しく動作致しません。
###試したこと
** ●正しいposition.topが取得できているか確認する **
まず、該当箇所まで正しく処理ができているか確認するため、
`$("html,body").animate({scrollTop:position.top},300,"swing");`の直前に
consoleへの出力処理`console.log('position.top:'+position.top);`を書きました。
するとその地点では`position.top`に要素の位置が正しく格納されていました。
** ●スムーススクロールが動作しているか確認する **
スムーススクロール自体がAndroidに対応できない可能性も考えましたが、
同ツール内に同様の処理で「画面上部に戻る」ボタンを用意しており、
それが動作するため問題ないように思います。
** ●様々な機種でデバッグを行う **
複数のAndroid端末を用いて(OSはAndroid 6、Android 5等)試しましたが、
すべての端末において動作できませんでした。
また、PCに実機をデバッグモードで接続し、
コンソールを確認しましたが、特にエラーは表示されませんでした。
### 懸念点として
ひとつ懸念点としては、今回の処理が`.on('click',hoge)`などの、
ユーザーによる操作から動作していない(※)のが、ひとつの原因なのかもしれないと考えています。
例えばiOSではHTML5のAudio要素について、ユーザーからの操作がない限り、
音声を鳴らすことが出来ませんが、それと似た原因なのかもしれないな……と。
しかし様々な資料等を調べてみましたが、その様な記述や、解決法などを見つけることはできませんでした。  
 
(※今回のツールの場合、バーコードリーダーの機種を問わず処理できるよう、
数値の入力開始と共に`setTimeout`で監視を行っています。
入力される度にタイマーをリセットし、1秒間入力が無ければ前述の処理を開始するというイメージです。)
私の力不足で大変恐縮なのですが、原因の心当たりや解決法など、なんでも結構です。
お知恵を拝借できますと、大変助かります。宜しくお願い致します。
  • JavaScript

    22252 questions

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

  • Android

    7655 questions

    Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

  • jQuery

    8814 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る