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>