Я вчора поставив подібне запитання, але пояснив це погано і не вказав на своє бажання чистого CSS рішення, яке, на мою думку, повинно бути можливим, тому я намагаюся знову.
В основному, у мене є проблема, де у мене є розділ прокручуваних повідомлень та поле введення під ним. Коли я натискаю кнопку, я б хотів, щоб поле введення збільшилося на 100 пікселів, не маючи також прокрутки розділів повідомлень.
Ось загадка, яка демонструє проблему в повному обсязі
Як бачите, при натисканні на кнопку "Додати маржина" також повідомлення прокручується вгору. Я хотів би, щоб він залишився там, де був. Аналогічно, якщо ви злегка прокручені вгору, щоб ви могли бачити лише друге до останнього повідомлення, натискання на кнопку також має зберегти цю позицію після натискання.
Цікавим є те, що така поведінка «іноді» зберігається. Наприклад, за деяких обставин (які я не можу зовсім зрозуміти) позиція прокрутки зберігається. Мені б просто хотілося, щоб він постійно поводився як такий.
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>
divщо прокручується вгору, це висота діва, яка зменшується. То чому це має значення? Що ж, це означає, щоscrollbarце не коригує свою позицію. Панель прокрутки запам'ятовує лише її положення відносно верхньої частини контейнера. Коли висота Div зменшується, здається, що смуга прокрутки прокручується вгору, але насправді це не так.