JavaScript의 자동 스크롤

블로그

최근에 채팅 앱이라는 프로젝트를 진행하고 있었는데 사용자에게 표시되는 메시지 문제를 해결해야 했습니다. 앱을 테스트하는 동안 사용자의 메시지가 화면에서 보이는 부분의 맨 아래에 도달하면 새 메시지를 계속 보려면 수동으로 스크롤해야 했으며 사용자 경험에 적합하지 않다는 것을 알았습니다. 내 질문은 사용자가 메시지를 보내는 동안 어떻게 이 스크롤을 자동으로 만들 수 있습니까? 답은 생각보다 쉬웠고 구글링을 해야만 했다.

게시물용 이미지

한 줄의 코드로 작업을 완료하는 데 도움이 될 수 있는 유용한 방법을 많이 찾았습니다.

트러스트 지갑에서 safemoon을 판매하는 방법

게시물용 이미지

($messages)는 메시지를 삽입하는 데 사용하는 div입니다.

const $messages = document.querySelector('#messages')

요소의 |_+_| 값은 요소의 상단에서 최상단까지의 거리 측정값입니다. 보이는 콘텐츠. 요소의 내용이 수직 스크롤바를 생성하지 않으면 |_+_| 값은 |_+_| 출처

|_+_| 읽기 전용 속성은 오버플로로 인해 화면에 표시되지 않는 콘텐츠를 포함하여 요소 콘텐츠의 높이를 측정한 것입니다. 출처

이제 이 함수는 새 메시지를 추가하는 메서드의 끝에서 호출하면 완벽하게 작동합니다. 그래서 여기서 큰 문제는 무엇입니까??. 새로운 사용자가 채팅에 참여하여 이전 메시지를 읽으려고 하면 새 메시지가 전송될 때 자동으로 채팅 하단으로 스크롤된다는 것을 알았습니다. 이로 인해 사용자는 새 메시지가 수신될 때마다 중단되고 아래로 스크롤되지 않고 이전 메시지를 읽거나 채팅을 검토할 수 없었습니다.

상상할 수 있듯이 이것은 정말 실망스럽고 최고의 사용자 경험을 제공하지 못할 수 있습니다. 내 머리 속의 해결책은 사용자가 이미 페이지 맨 아래에 있는 경우에만 자동 스크롤 기능이 실행되는지 확인해야 한다는 것이었습니다. 이는 사용자가 실제로 마지막 메시지를 읽고 있음을 의미하지만 사용자가 맨 위로 이전 메시지 읽기 자동으로 종료되지 않는 방식으로 이 메서드를 실행하면 안 됩니다.

이제 이 새로운 방법을 단계별로 구축해 보겠습니다. 먼저 마지막 메시지 요소를 잡는 변수를 생성해야 합니다.

scrollTop

둘째, 새 메시지의 높이를 가져와 여백도 고려해야 하며 따라야 할 몇 가지 단계가 있습니다.

scrollTop

#javascript #프로그래밍 #개발자 #웹 개발

미디엄닷컴

JavaScript의 자동 스크롤

자바스크립트의 자동 스크롤. 사용자의 메시지가 화면에서 보이는 부분의 맨 아래에 도달하면 새 메시지를 계속 보려면 수동으로 스크롤해야 한다는 것을 알았습니다. 사용자가 메시지를 보내는 동안 어떻게 이 스크롤을 자동으로 만들 수 있습니까? 한 줄의 코드로 작업을 완료하는 데 도움이 될 수 있는 유용한 방법을 많이 찾았습니다.