J'essaie d'imiter d'autres applications de chat mobile où lorsque vous sélectionnez la send-messagezone de texte et qu'il ouvre le clavier virtuel, le message le plus bas est toujours en vue. Il ne semble pas y avoir un moyen incroyable de le faire avec CSS, donc JavaScript resize(seul moyen de savoir quand le clavier est ouvert et fermé apparemment) et le défilement manuel à la rescousse.
Quelqu'un a fourni cette solution et j'ai découvert cette solution , qui semblent fonctionner toutes les deux.
Sauf dans un cas. Pour une raison quelconque, si vous êtes à moins de MOBILE_KEYBOARD_HEIGHT(250 pixels dans mon cas) pixels du bas de la div des messages, lorsque vous fermez le clavier mobile, quelque chose d'étrange se produit. Avec l'ancienne solution, il défile vers le bas. Et avec cette dernière solution, il fait défiler les MOBILE_KEYBOARD_HEIGHTpixels à partir du bas.
Si vous faites défiler au-dessus de cette hauteur, les deux solutions fournies ci-dessus fonctionnent parfaitement. Ce n'est que lorsque vous êtes près du fond qu'ils ont ce problème mineur.
Je pensais que c'était peut-être juste mon programme qui causait cela avec du code errant étrange, mais non, j'ai même reproduit un violon et il a ce problème exact. Mes excuses pour avoir rendu cela si difficile à déboguer, mais si vous allez sur https://jsfiddle.net/t596hy8d/6/show (le suffixe d'émission fournit un mode plein écran) sur votre téléphone, vous devriez pouvoir voir le même comportement.
Ce comportement étant, si vous faites défiler suffisamment vers le haut, l'ouverture et la fermeture du clavier maintient la position. Cependant, si vous fermez le clavier à quelques MOBILE_KEYBOARD_HEIGHTpixels du bas, vous constaterez qu'il défile vers le bas à la place.
Quelle est la cause de cela?
Reproduction du code ici:
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>