내가 물었다 비슷한 질문을 어제하지만 가난을 설명하고, 내가 다시 노력하고, 그래서 가능해야한다고 생각 순수 CSS 솔루션에 대한 내 욕망을 지정하지 않았습니다.
기본적으로 스크롤 가능한 메시지 div와 그 아래에 입력 필드가있는 문제가 있습니다. 버튼을 클릭하면 메시지 div를 스크롤하지 않고도 입력 필드가 100 픽셀로 증가하고 싶습니다.
보시다시피, "여백 추가"버튼을 클릭하면 메시지 div도 위로 스크롤됩니다. 나는 그것이 있던 곳에 머물고 싶습니다. 마찬가지로, 약간 위로 스크롤하여 두 번째에서 마지막 메시지 만 볼 수있는 경우 버튼을 클릭하면 클릭시 해당 위치가 유사하게 유지됩니다.
흥미로운 점은이 동작이 "때때로"보존된다는 것입니다. 예를 들어, 어떤 상황에서는 (추론 할 수없는) 스크롤 위치가 유지됩니다. 나는 그것이 일관되게 그렇게 행동하기를 원합니다.
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>
귀하의 게시물은 완벽한 의미를 갖습니다 (사람들이 원하는 결과를 알고 있다는 의미에서). 나는 지식이 당신에게 명백하지 않은 경우에 대비하여 무언가를 공유하고 있습니다. 말했다 문제) ;-)
—
리처드
네, 사실입니다. 설명해 주셔서 감사합니다. 한 번 할 수있는 하위 컨텐츠를 볼 수 없기 때문에 위로 스크롤하는 것처럼 "보이는"것입니다. 실제로 스크롤 위치는 변하지 않습니다. 약간의 환상. 예, 해결책을 찾는 데 도움이 될 수 있습니다.
—
Ryan Peschel
div위로 스크롤하는 것이 아니며 감소하는 div의 높이입니다. 왜 이것이 문제가됩니까? 음, 그 의미는scrollbar위치를 조정하지 않는다는 것입니다. 스크롤바 는 컨테이너 상단에서 상대적인 위치 만 기억 합니다. div의 높이가 줄어들면 스크롤 막대가 위로 스크롤되는 것처럼 보이지만 실제로는 그렇지 않습니다.