Tôi đã hỏi một câu hỏi tương tự ngày hôm qua nhưng giải thích nó không tốt và không chỉ rõ mong muốn của tôi về giải pháp CSS thuần túy, điều mà tôi nghĩ là có thể, vì vậy tôi đang thử lại.
Về cơ bản, tôi có một vấn đề trong đó tôi có một div các tin nhắn có thể cuộn và một trường nhập liệu bên dưới nó. Khi tôi nhấp vào nút, tôi muốn trường đầu vào được tăng lên 100 pixel, mà không cần cuộn div tin nhắn.
Dưới đây là một câu đố thể hiện toàn bộ vấn đề
Như bạn có thể thấy, khi bạn nhấp vào nút "thêm lề", các thông báo div cũng cuộn lên. Tôi muốn nó ở lại nơi nó được. Tương tự, nếu bạn hơi cuộn lên để bạn chỉ có thể thấy tin nhắn thứ hai đến tin nhắn cuối cùng, nhấp vào nút sẽ giữ nguyên vị trí đó khi nhấp.
Điều thú vị là hành vi này "đôi khi" được bảo tồn. Ví dụ: trong một số trường hợp (mà tôi không thể suy luận được), vị trí cuộn được giữ lại. Tôi chỉ muốn nó luôn cư xử như vậy.
window.onload = function(e) {
document.querySelector(".messages").scrollTop = 10000;
};
function test() {
document.querySelector(".send-message").classList.toggle("some-margin");
}.container {
width: 400px;
height: 300px;
border: 1px solid #333;
display: flex;
flex-direction: column;
}
.messages {
overflow-y: auto;
height: 100%;
}
.send-message {
width: 100%;
display: flex;
flex-direction: column;
}
.some-margin {
margin-bottom: 100px;
}<div class="container">
<div class="messages">
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
</div>
<div class="send-message">
<input />
</div>
</div>
<button onclick="test()">add margin</button>
divlà cuộn lên, đó là chiều cao của div đang giảm. Vậy tại sao điều này lại quan trọng? Vâng, điều đó có nghĩa là việcscrollbarkhông điều chỉnh vị trí của nó. Thanh cuộn chỉ ghi nhớ vị trí của nó so với đỉnh của thùng chứa. Khi chiều cao của div giảm xuống, có vẻ như thanh cuộn đang cuộn lên, nhưng thực tế không phải vậy.