Estoy tratando de imitar otras aplicaciones de chat móviles donde, cuando seleccionas el send-messagecuadro de texto y se abre el teclado virtual, el mensaje más inferior todavía está a la vista. Parece que no hay una manera de hacer esto con CSS de manera sorprendente, por lo que JavaScript resize(única forma de averiguar cuándo se abre y cierra el teclado aparentemente) eventos y desplazamiento manual al rescate.
Alguien proporcionó esta solución y descubrí esta solución , que parecen funcionar.
Excepto en un caso. Por alguna razón, si está dentro de MOBILE_KEYBOARD_HEIGHT(250 píxeles en mi caso) píxeles de la parte inferior de la división de mensajes, cuando cierra el teclado del móvil, sucede algo extraño. Con la solución anterior, se desplaza hacia abajo. Y con la última solución, en su lugar, se desplaza hacia arriba MOBILE_KEYBOARD_HEIGHTpíxeles desde la parte inferior.
Si se desplaza por encima de esta altura, ambas soluciones proporcionadas anteriormente funcionan perfectamente. Es solo cuando estás cerca del fondo que tienen este problema menor.
Pensé que tal vez era solo mi programa lo que causaba esto con un código extraño, pero no, incluso reproduje un violín y tiene este problema exacto. Mis disculpas por hacer que esto sea tan difícil de depurar, pero si vas a https://jsfiddle.net/t596hy8d/6/show (el sufijo show proporciona un modo de pantalla completa) en tu teléfono, deberías poder ver el mismo comportamiento
Ese comportamiento es, si se desplaza hacia arriba lo suficiente, abrir y cerrar el teclado mantiene la posición. Sin embargo, si cierra el teclado dentro de los MOBILE_KEYBOARD_HEIGHTpíxeles de la parte inferior, encontrará que se desplaza hacia la parte inferior.
¿Qué está causando esto?
Reproducción de código aquí:
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>