Tôi đang cố gắng bắt chước các ứng dụng trò chuyện trên thiết bị di động khác khi bạn chọn send-messagehộp văn bản và nó mở bàn phím ảo, tin nhắn dưới cùng vẫn còn trong tầm nhìn. Dường như không có cách nào để làm điều này với CSS một cách đáng kinh ngạc, vì vậy JavaScript resize(chỉ có cách tìm ra khi bàn phím được mở và đóng rõ ràng) các sự kiện và cuộn thủ công để giải cứu.
Ai đó đã cung cấp giải pháp này và tôi đã tìm ra giải pháp này , cả hai đều có vẻ hiệu quả.
Ngoại trừ trong một trường hợp. Vì một số lý do, nếu bạn ở trong MOBILE_KEYBOARD_HEIGHT(250 pixel trong trường hợp của tôi) pixel ở dưới cùng của div tin nhắn, khi bạn đóng bàn phím di động, điều gì đó sẽ xảy ra. Với giải pháp trước đây, nó cuộn xuống phía dưới. Và với giải pháp sau, nó thay vào đó cuộn lên các MOBILE_KEYBOARD_HEIGHTpixel từ phía dưới.
Nếu bạn được cuộn trên độ cao này, cả hai giải pháp được cung cấp ở trên đều hoạt động hoàn hảo. Chỉ khi bạn ở gần đáy thì họ mới gặp phải vấn đề nhỏ này.
Tôi nghĩ có lẽ đó chỉ là chương trình của tôi gây ra điều này với một số mã đi lạc kỳ lạ, nhưng không, tôi thậm chí còn sao chép một câu đố và nó có vấn đề chính xác này. Tôi xin lỗi vì làm cho việc này rất khó để gỡ lỗi, nhưng nếu bạn truy cập https://jsfiddle.net/t596hy8d/6/show (hậu tố hiển thị cung cấp chế độ toàn màn hình) trên điện thoại của bạn, bạn sẽ có thể thấy cùng hành vi.
Hành vi đó là, nếu bạn cuộn lên đủ, mở và đóng bàn phím sẽ duy trì vị trí. Tuy nhiên, nếu bạn đóng bàn phím trong các MOBILE_KEYBOARD_HEIGHTpixel ở phía dưới, bạn sẽ thấy rằng nó sẽ cuộn xuống phía dưới thay thế.
Điều gì gây ra điều này?
Tái tạo mã ở đây:
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>