Я пытаюсь имитировать другие мобильные приложения чата, где при выборе send-message текстового поля и открытии виртуальной клавиатуры самое нижнее сообщение все еще отображается. Кажется, не существует способа сделать это с помощью CSS, так что JavaScriptresize (единственный способ выяснить, когда клавиатура открывается и закрывается, очевидно), события и ручная прокрутка для спасения.
Кто-то предоставил это решение, и я узнал это решение , которое, похоже, работает.
За исключением одного случая. По какой-то причине, если вы находитесь в пределахMOBILE_KEYBOARD_HEIGHT (250 пикселей в моем случае) пикселей от нижней части div сообщений, когда вы закрываете мобильную клавиатуру, происходит нечто странное. С прежним решением, оно прокручивается до дна. И с последним решением, он вместо этого прокручивается вверхMOBILE_KEYBOARD_HEIGHT пиксели снизу.
Если вы прокручиваетесь выше этой высоты, оба решения, представленные выше, работают безупречно. Только когда вы находитесь на дне, у них есть эта незначительная проблема.
Я подумал, может быть, это была просто моя программа, вызывающая это с каким-то странным заблудшим кодом, но нет, я даже воспроизвел скрипку, и она имеет именно эту проблему. Приношу свои извинения за то, что это так сложно отлаживать, но если вы перейдете на https://jsfiddle.net/t596hy8d/6/show (суффикс show предоставляет полноэкранный режим) на вашем телефоне, вы сможете увидеть такое же поведение
Такое поведение, если вы прокручиваете достаточно вверх, открытие и закрытие клавиатуры сохраняет положение. Однако, если вы закроете клавиатуру в пределах MOBILE_KEYBOARD_HEIGHTпикселей снизу, вы обнаружите, что она прокручивается вниз.
Что вызывает это?
Воспроизведение кода здесь:
window.onload = function(e){
document.querySelector(".messages").scrollTop = 10000;
bottomScroller(document.querySelector(".messages"));
}
function bottomScroller(scroller) {
let scrollBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight;
scroller.addEventListener('scroll', () => {
scrollBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight;
});
window.addEventListener('resize', () => {
scroller.scrollTop = scroller.scrollHeight - scrollBottom - scroller.clientHeight;
scrollBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight;
});
}.container {
width: 400px;
height: 87vh;
border: 1px solid #333;
display: flex;
flex-direction: column;
}
.messages {
overflow-y: auto;
height: 100%;
}
.send-message {
width: 100%;
display: flex;
flex-direction: column;
}<div class="container">
<div class="messages">
<div class="message">hello 1</div>
<div class="message">hello 2</div>
<div class="message">hello 3</div>
<div class="message">hello 4</div>
<div class="message">hello 5</div>
<div class="message">hello 6 </div>
<div class="message">hello 7</div>
<div class="message">hello 8</div>
<div class="message">hello 9</div>
<div class="message">hello 10</div>
<div class="message">hello 11</div>
<div class="message">hello 12</div>
<div class="message">hello 13</div>
<div class="message">hello 14</div>
<div class="message">hello 15</div>
<div class="message">hello 16</div>
<div class="message">hello 17</div>
<div class="message">hello 18</div>
<div class="message">hello 19</div>
<div class="message">hello 20</div>
<div class="message">hello 21</div>
<div class="message">hello 22</div>
<div class="message">hello 23</div>
<div class="message">hello 24</div>
<div class="message">hello 25</div>
<div class="message">hello 26</div>
<div class="message">hello 27</div>
<div class="message">hello 28</div>
<div class="message">hello 29</div>
<div class="message">hello 30</div>
<div class="message">hello 31</div>
<div class="message">hello 32</div>
<div class="message">hello 33</div>
<div class="message">hello 34</div>
<div class="message">hello 35</div>
<div class="message">hello 36</div>
<div class="message">hello 37</div>
<div class="message">hello 38</div>
<div class="message">hello 39</div>
</div>
<div class="send-message">
<input />
</div>
</div>