10

Android モバイル アプリのチャット機能を開発しています。これは 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>

scrollbuttom の jQuery コードは次のとおりです。

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

8 に答える 8

33

この問題は、オーバーフロー プロパティが 'scroll' に設定されている場合にのみ発生するようです (この場合のみ問題になります)。私にとってうまくいった回避策は、最初にオーバーフローを「hidden」に設定し、scrollTop を設定してから、オーバーフローを「scroll」に戻すことでした。

于 2013-01-20T06:49:37.433 に答える
3

編集：「トップ」スタイルをたとえば-120に設定すると、その120pxだけdivを「スクロール」する必要があることがわかりました。

ここに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>

私はこれをAndroidの3.0および4.0バージョンでテストしました（エミュレーターの考えに基づいていたと言わなければなりません）。

お役に立てれば！

オリジナルメッセージ：

ここで報告されているように、Androidの一部のバージョンではスクロールトップが機能していないようです。これについて、Googleからの明確な回答はありません（主に3.0と4.0でこの問題が発生しているようですが、2.3以降または4.1は影響を受けていないようです）。

申し訳ありませんが、現在このバグの解決策はないようです。

于 2012-09-04T10:32:45.513 に答える
3

scrollTop() を使用するときは、Android のサポートに次を使用します。私の経験では、普遍的な修正としてかなりうまく機能しています。

CSS:

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

JS:

$(yourSelector).addClass("androidFix").scrollTop(0).removeClass("androidFix");
于 2014-06-02T21:15:21.123 に答える
2

私にとっての回避策は次のとおりです。

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

特定のIDを持つ要素にジャンプできます。

それがすべての人にとっての解決策ではないことはわかっています。購入して、誰かを助けることができるかもしれません。

于 2015-08-24T08:35:55.953 に答える
1

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

http://jsfiddle.net/RyLek/embedded/result/<-オーバーフローに設定されたDIV自動 http://jsfiddle.net/RyLek/2/embedded/result/<-オーバーフロースクロールに設定されたDIV

問題は、下にスクロールしたときに.scrollTopプロパティがDIV内の現在の位置に更新されないことです。また、scrollTopプロパティを設定しても、実際にはDIVスクロール位置は更新されません。

上記の回答に対する「アイトール・カルデロン」のコメントに応えて。オーバーフロープロパティをスクロールするように設定してみましたが（上記のサンプルを参照）、影響はありません。

また、MaxthonやDolphinなど、この問題が発生しているサードパーティのブラウザをいくつか試しました。android 4.0 ICSデバイスを実行している場合は、scrollTopプロパティが機能するGooglePlayストアからGoogleChromeブラウザをダウンロードできます。当社にはこのブラウザをサポートしないハニカムデバイスがほとんどあるため、これはオプションではありません。

この問題について先週私が投稿した質問は次のとおりです。jQueryscrollTop（）は、モバイルブラウザのDIVのスクロールでは機能しません。応答は、これをCSSで実装しようとすることでしたが、これは達成できませんでした。

于 2012-09-06T21:05:38.637 に答える