Android携帯でスクロールトップが動作しない

Question

Andriodモバイルアプリのチャット機能を開発中です.jQueryとjQueryモバイルテーマのフロントエンドを使用しています。

私の問題は、scrollTop（）関数を使って下部に新しいメッセージを追加しようとしています。 scrollTop（）関数はすべてのブラウザでうまく動作しますが、Andriodでは動作していません。ここ は、HTMLコードである：ここで

<div data-role="page" id="chatPage"> 
    <div data-role="content"> 
     <div id="incomingMessages" style="height: 180px;overflow: auto;"> 
     </div> 
     <label for="messageText"><strong>Message:</strong></label> 
     <table width="100%"> 
      <tr> 
       <td width="75%"> 
        <textarea name="messageText" id="messageText"></textarea> 
       </td> 
       <td width="25%"> 
        <div id="sendButtonId" style="display:block"> 
         <a data-role="button" id="chatSendButton" name="chatSendButton" value="Send" make_button_disabled="enable"> 
          Send 
         </a> 
        </div> 
       </td> 
      </tr> 
     </table> 
     <table> 
      <tr> 
       <td> 
        <div id="endChatButton"> 
         <a data-role="button" id="chatCloseButton" name="chatCloseButton" value="EndChat" make_button_disabled="enable"> 
          End Chat 
         </a> 
        </div> 
       </td> 
      </tr> 
     </table> 
    </div> 
</div> 

jQueryのコードはscrollbuttomためです：

$("#chatSendButton").click(function() { 
    var mes = $("#messageText").val(); 
    $("#incomingMessages").append("<div class='message'><span class='username'>" +'Admin'+ ":" +"</span> "+ mes + "</div>"); 
    $("#incomingMessages").scrollTop($("#incomingMessages")[0].scrollHeight); 
}); 

Answer 1

EDIT：私が見つけたそのページの "トップ" スタイルを設定した場合、-120が言うにdivを120pxだけ「スクロール」する必要があります。

ここ

HTMLの例（すべてのインラインスタイルのため申し訳ありません）：

<div id="container" style="position:relative; display:block; overflow:scroll; height:100px; border:1px solid;"> 
    <div style="position: relative; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(0, 0, 0))); height: 300px; width: 100%; background-position: initial initial; background-repeat: initial initial;" id="frm"> 
     <p>Message 1</p> 
     <p>Message 2</p> 
     <p>Message 3</p> 
     <p>Message 4</p> 
     <p style="color:#fff">Message you want to see right now</p> 
     <p>Message 5</p> 
     <p>Message 6</p> 
     <p>Message 7</p> 
     <p>Message 8</p> 
</div> 

とJavaScript一部：

<script type="text/javascript"> 
function init() 
{ 
    document.getElementById("setScroll").addEventListener('click',function() 
    { 
     document.getElementById("frm").style.top = -120;//Scroll by 120px 
    }); 
} 
</script> 

私は3.0と4.0のバージョンでこれをテストしていますAndroid（私はそれがエミュレータの考えであったと言わなければならない）。

希望すると便利です。

元のメッセージ：

スクロールトップはhereを報告したようにAndroidの一部のバージョンでは機能していないようだ、とこのことについてGoogleからの決定的な答えはありません（主に3.0と4.0は、この問題を持っているように見える、2.3ベローまたは4.1は影響を受けていないようです）。

申し訳ありませんが、このバグの解決策はまだありません。

Answer 2

申し訳ありませんが、私は答えを持っていないし、コメントを残すために必要な評判レベルがまだ必要ないので、私はこれを「回答」として掲示しなければなりません。私は解決策を見つけようとするのにこれに取り組むのに長時間を費やしてきました。私は何が起こっているのかについていくつかの洞察を与えるテストページを作成しました。

http://jsfiddle.net/RyLek/embedded/result/ < - 自動 http://jsfiddle.net/RyLek/2/embedded/result/ <をオーバーフローさDIVセットは -

に問題をスクロールオーバーフローするDIVセットを使用すると、スクロールダウンしたときに.scrollTopプロパティはDIV内の現在の位置に更新していないです。 scrollTopプロパティを設定しても、実際にはDIVのスクロール位置は更新されません。

上記の回答で「Aitor Calderon」というコメントがありました。スクロールするオーバーフロープロパティを設定しようとしましたが（上のサンプルを参照）、それは何の影響もありません。

また、この問題を抱えているMaxthonやDolphinなど、サードパーティ製のブラウザをいくつか試しました。 Android 4.0 ICSデバイスを使用している場合は、scrollTopプロパティで動作するGoogle PlayストアからGoogle Chromeブラウザをダウンロードすることができます。私たちの会社はほとんどがこのブラウザをサポートしていないハニカムデバイスを持っているため、これはオプションではありません。

ここで私は先週号のこの問題について投稿した質問です：jQuery scrollTop() does not work in scrolling DIV on mobile browsers, alternatives?これは私が達成できなかったCSSでこれを試してみることでした。

Answer 3

この問題は、オーバーフロープロパティが 'scroll'（これが気になる唯一の時間）に設定されている場合にのみ発生するようです。私のために働いた回避策は、最初にオーバーフローを「隠し」に設定し、scrollTopを設定し、次にオーバーフローを「スクロール」に戻すように設定しました。

Answer 4

ページの上部から特定の要素にスクロールする必要がありましたが、.offsetはAndroidの& iOSの解決策でした。 .scrolltopはiOSでのみ動作します。

$('html, body').animate({scrollTop: $('#element').offset().top + 20}, 10); 

Answer 5

scrollTop（）を使用する場合、Androidのサポートには次のものを使用します。私の経験では普遍的な修正としてかなりうまくいきました。

CSS：

.androidFix { 
    overflow:hidden !important; 
    overflow-y:hidden !important; 
    overflow-x:hidden !important; 
} 

JS：私のために

$(yourSelector).addClass("androidFix").scrollTop(0).removeClass("androidFix"); 

Answer 6

回避策があった。

window.location.hash = '#element' + currentItem; 

あなたが特定のIDを持つ要素にジャンプすることができます。

私は誰のための解決策でもないことを知っています。おそらく私は誰かを助けることができます。