ScrollTop не работает в мобильных телефонах Android

Я занимаюсь разработкой функций чата для мобильного приложения 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);
});

Ответ 1

Кажется, что эта проблема возникает только тогда, когда свойство переполнения установлено на "прокрутку" (что является единственным моментом, когда мы будем заботиться об этом). Обходной путь, который работал у меня, заключался в том, чтобы сначала установить переполнение в "скрытое", установить scrollTop, а затем перебросить обратно в "прокрутку".

Ответ 2

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 (я должен сказать, что это было на эмуляторе).

Надеюсь, это поможет!

ОРИГИНАЛЬНОЕ СООБЩЕНИЕ:

Прокрутка вверх, кажется, не работает в некоторых версиях Android, как сообщается здесь, и нет окончательного ответа от Google об этом (выглядит в основном 3.0 и 4.0 есть эта проблема, 2.3 и ниже или 4.1, похоже, не затронуты).

Извините, но похоже, что сейчас нет решения для этой ошибки.

Ответ 3

Я использую следующие для поддержки Android при использовании scrollTop(). Работала очень хорошо, как универсальное решение в моем опыте.

CSS:

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

JS:

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

Ответ 4

Извините, у меня нет ответа и у меня нет необходимого уровня репутации, чтобы оставить комментарий, поэтому я должен опубликовать его как "ответ". Я долгое время работал над этим, пытаясь найти обходное решение, не нашел его. Я создал тестовую страницу, которая дает некоторое представление о том, что происходит.

http://jsfiddle.net/RyLek/embedded/result/ < - DIV настроено на автоматическое переполнение http://jsfiddle.net/RyLek/2/embedded/result/ < - DIV настроено на прокрутку переполнения

Проблема заключается в том, что свойство .scrollTop не обновляется до текущей позиции в DIV при прокрутке вниз. Также, когда вы устанавливаете свойство scrollTop, оно фактически не обновляет положение прокрутки DIV.

В ответ на комментарий "Aitor Calderon", сделанный по вышеуказанному ответу. Я попытался установить свойство переполнения для прокрутки (см. Выше пример), и это не влияет.

Я также попробовал несколько сторонних браузеров на рынке, таких как Maxthon и Dolphin, которые также имеют эту проблему. Если вы используете Android-устройство Android Android 4.0, вы можете загрузить браузер Google Chrome из Google Play Store, в котором работает свойство scrollTop. Это не вариант для меня, поскольку наша компания в основном имеет сотовые устройства, которые не поддерживают этот браузер.

Вот вопрос, который я опубликовал на прошлой неделе по этой проблеме: jQuery scrollTop() не работает при прокрутке DIV на мобильных браузерах, альтернативы? Ответ был попробовать и реализовать это в CSS, который мне не удалось добиться.

Ответ 5

Мне нужно было перейти от верхней части страницы к определенному элементу, и .offset было для меня решением для Android и iOS..scrolltop работает только в iOS.

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

Ответ 6

Обходной путь для меня был:

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

Вы можете перейти к элементу с определенным идентификатором.

Я знаю, что это не решение для всех, купите, возможно, я могу помочь кому-то.