scrollTop не работает на мобильных телефонах Android
Разрабатываю функциональность чата для мобильного приложения Andriod, для этого использую интерфейс для мобильных тем jQuery и jQuery.
Моя проблема - я пытаюсь использовать функцию scrollTop() для добавления новых сообщений внизу. Функция scrollTop() работает нормально во всех браузерах, но в Андриоде она не работает.. у кого-то есть идеи по этому поводу. Вот 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 для прокрутки:
$("#chatSendButton").click(function() {
var mes = $("#messageText").val();
$("#incomingMessages").append("<div class='message'><span class='username'>" +'Admin'+ ":" +"</span> "+ mes + "</div>");
$("#incomingMessages").scrollTop($("#incomingMessages")[0].scrollHeight);
});
8 ответов
Кажется, что эта проблема возникает только тогда, когда свойство overflow установлено в значение "scroll" (это единственный раз, когда мы позаботимся об этом). Обходным решением, которое мне помогло, было сначала установить переполнение на "скрытый", установить scrollTop, а затем вернуть переполнение на "прокрутку".
РЕДАКТИРОВАТЬ: я обнаружил, что если вы установите стиль "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, похоже, не затронуты).
Извините, но, похоже, сейчас нет решения этой проблемы.
Я использую следующее для поддержки Android при использовании scrollTop(). Работал довольно хорошо, как универсальное решение в моем опыте.
CSS:
.androidFix {
overflow:hidden !important;
overflow-y:hidden !important;
overflow-x:hidden !important;
}
JS:
$(yourSelector).addClass("androidFix").scrollTop(0).removeClass("androidFix");
Я заметил, что в android .scrolltop() возвращает значение в десятичных дробях , что вызывает проблему при вычислении. Я проверил это с помощью alert($(this).scrollTop());
Я бы предложил использовать Math.round() , чтобы он работал так же, как рабочий стол и IOS. Вот как я этого добился:
var rounded = Math.round($(this).scrollTop());
if (rounded == $(this)[0].scrollHeight - $(this).height()) {
}
Это сработало для меня!
Обходной путь для меня был:
window.location.hash = '#element' + currentItem;
Вы можете перейти к элементу с определенным идентификатором.
Я знаю, что это решение не для всех, но, возможно, я могу кому-нибудь помочь.
Извините, у меня нет ответа, и у меня нет необходимого уровня репутации, чтобы оставить комментарий, поэтому я должен опубликовать это как "ответ". Я потратил много времени, работая над этим, пытаясь найти обходной путь, но не нашел его. Я создал тестовую страницу, которая дает некоторое представление о том, что происходит.
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, вы можете загрузить браузер Google Chrome из магазина Google Play, в котором работает свойство scrollTop. Это не вариант для меня, поскольку в нашей компании в основном имеются сотовые устройства, которые не поддерживают этот браузер.
Вот вопрос, который я разместил на прошлой неделе по этому вопросу: jQuery scrollTop () не работает при прокрутке DIV в мобильных браузерах, альтернативы? Ответ состоял в том, чтобы попытаться реализовать это в CSS, что мне не удалось сделать.
Мне нужно было перейти от верхней части страницы к определенному элементу, и.offset был для меня решением для Android и iOS. .scrolltop работал только в iOS.
$('html, body').animate({scrollTop: $('#element').offset().top + 20}, 10);
Это будет работать во многих браузерах и устройствах и очень просто.