Я намагаюся імітувати інші додатки для чату для мобільних пристроїв, коли, коли ви вибираєте send-messageтекстове поле і воно відкриває віртуальну клавіатуру, все ще переглядається найнижнє повідомлення. Здається, це не дивно зробити це за допомогою CSS, тому JavaScript resize(єдиний спосіб дізнатися, коли клавіатура відкривається та закривається, очевидно) події та ручна прокрутка до допомоги.
Хтось надав це рішення, і я дізнався це рішення , яке, здається, працює.
За винятком одного випадку. За якийсь - то причини, якщо ви перебуваєте в межах MOBILE_KEYBOARD_HEIGHT(250 пікселів в моєму випадку) пікселів в нижній частині DIV повідомлень, при закритті клавіатури мобільного, що - то дивне відбувається. З колишнім рішенням вона прокручується додолу. І з останнім рішенням він замість прокручує MOBILE_KEYBOARD_HEIGHTпікселі знизу.
Якщо ви прокручуєте вище цієї висоти, обидва запропоновані вище рішення працюють бездоганно. Це лише незначне питання, коли ви знаходитесь біля нижньої частини.
Я подумав, що, можливо, саме моя програма викликала це з якимось дивним бродячим кодом, але ні, я навіть відтворив загадку, і вона має саме таку проблему. Мої вибачення за те, що це настільки важко налагодити, але якщо ви перейдете на сторінку https://jsfiddle.net/t596hy8d/6/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>