web-dev-qa-db-ja.com

scrollTopがAndroid mobilesで機能しない

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>

これが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);
});
androidjqueryjquery-uicordovajquery-mobile
10
Shaik Yasin Basha

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

27
Allan Nienhuis

EDIT：「top」スタイルをたとえば-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でテストしました（エミュレーターの考えにあったと言わなければなりません）。

お役に立てれば！

元のメッセージ：

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

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

3
Aitor Calderon

私はscrollTop（）を使用するときにAndroidサポートのために以下を使用します）。私の経験では普遍的な修正としてかなりうまく機能しました。

CSS：

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

JS：

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

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

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

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

私はそれがすべての人のための解決策ではないことを知っています、多分私が誰かを助けることができるのを買う。

2
David

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

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デバイスを実行している場合は、GooglePlayストアからGoogle Chromeブラウザをダウンロードできます。 scrollTopプロパティは機能します。当社にはこのブラウザをサポートしないハニカムデバイスがほとんどあるため、これは私にとってオプションではありません。

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

1
LukeS

ページの上部から特定の要素までスクロールする必要があり、.offsetはAndroid＆iOSのソリューションでした。scrolltopはiOSでのみ機能しました。

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