React Scroll 질문

{this.div = ref}}> ~~~~

componentDidMount에서
// 스크롤이 맨 아래로 향했을때
this.chatInner.addEventListener(‘scroll’, () => {
if (this.chatInner.scrollTop + this.chatInner.clientHeight >= this.chatInner.scrollHeight) {
this.setState({chatLog:this.state.chatLog.concat({“a”:“1”})});
}
});

이렇게 하면 스크롤이 맨 아래로 향했을때 chatLog라는 배열에 a:1을 삽입합니다.

그리고 스크롤 위치가 자동으로 위로 올라오게 됩니다.

어떻게 이해를 시켜드려야 할지 모르겠는데요…

1

사진에 보다시피 현재 내용이 저렇게 있다 가정하고 스크롤을 아래로 내려봅시다.
그리고 다음 사진을 보면

1

현재 아래는 만 아래는 추가된 내용이 있고 스크롤이 자동으로 위로 올라오게 됩니다.

이건 잘 작동하는것 같네요 하지만 스크롤을 반대로한다면 작동이 되지 않습니다.

스크롤을 맨 위로 올렸을때로 다시 설명드려보겠습니다

1

해당 사진은 기본일때 이렇게 보입니다. 이제 스크롤을 위로 올려보죠

1

스크롤을 올리니 이전내용이 저렇게 불러와졌습니다. 근데 스크롤은 위로 딱 붙어버립니다.

분명 스크롤을 맨 아래로 했을땐 내용이 추가되고 스크롤이 자동으로 위로 올라왔는데

스크롤을 Top으로 하니 스크롤이 아래로 살짝 내려가지 않고 그냥 쭉 올라가버리네요

어떻게 해야할까요?