Estou tentando imitar outros aplicativos de bate-papo para celular onde, quando você seleciona a send-messagecaixa de texto e ela abre o teclado virtual, a mensagem mais abaixo ainda está em exibição. Parece não haver uma maneira de fazer isso com o CSS de maneira surpreendente, então o JavaScript resize(única maneira de descobrir quando o teclado é aberto e fechado aparentemente) eventos e rolagem manual para o resgate.
Alguém forneceu essa solução e eu descobri essa solução , que parece funcionar.
Exceto em um caso. Por alguma razão, se você estiver dentro MOBILE_KEYBOARD_HEIGHT(250 pixels no meu caso) de pixels da parte inferior da div das mensagens, quando fechar o teclado do celular, algo estranho acontecerá. Com a solução anterior, ela rola para o fundo. E com a última solução, em vez disso, rola os MOBILE_KEYBOARD_HEIGHTpixels para baixo.
Se você for rolado acima dessa altura, as duas soluções fornecidas acima funcionarão perfeitamente. Somente quando você está perto do fundo é que eles têm esse problema menor.
Eu pensei que talvez fosse apenas o meu programa causando isso com algum código estranho, mas não, eu até reproduzi um violino e ele tem esse problema exato. Peço desculpas por tornar isso tão difícil de depurar, mas se você acessar https://jsfiddle.net/t596hy8d/6/show (o sufixo show fornece um modo de tela cheia) no seu telefone, você poderá ver o mesmo comportamento.
Sendo esse comportamento, se você rolar o suficiente, abrir e fechar o teclado mantém a posição. No entanto, se você fechar o teclado dentro dos MOBILE_KEYBOARD_HEIGHTpixels da parte inferior, verá que ele rola para a parte inferior.
O que está causando isso?
Reprodução de código aqui:
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>