(javascript) ag-grid 스크롤 끝까지 내려왔는지 확인하는 방법

(javascript) ag-grid 스크롤 끝까지 내려왔는지 확인하는 방법

ag-grid scroll event

 

ag-grid 사용 중 그리드 내에서 스크롤이 끝까지 내려왔을 때, 특정 버튼을 활성화하는 기능이 필요하여 스크롤이 끝까지 내려왔는지 확인하는 코드를 간단하게 기록하였습니다.

추가로 브라우저 배열이 바뀌는 경우 소수점 계산으로 인해 동작에 문제가 발생했던 부분까지 개선하였으며 관련 내용도 아래 기록해 두었으니 함께 확인하시면 좋을 것 같습니다.

 

 

    // gridOptions
    gridOptions["onBodyScrollEnd"] = function(event) {
      const gridBody = document.querySelector('.ag-body-viewport');
      if (gridBody) {
        // 1. 처음 적용했던 코드
        if ((gridBody.scrollHeight - gridBody.scrollTop) == gridBody.clientHeight) {
          console.log("BodyScrollEnd!!!");
        }
        
        // 2. 배율로 인한 문제 발생 후 개선한 코드
        if ((gridBody.scrollHeight - gridBody.scrollTop) <= (gridBody.clientHeight + 1)) {
          console.log("BodyScrollEnd@@@");
        }        
      }
    }

 

먼저 document.querySelector('.ag-body-viewport') 부분을 통해 ag-grid 내부에서 실제 스크롤이 발생하는 영역 DOM 요소를 가져옵니다.

이어서 해당 DOM 요소의 scrollHeight는 전체 스크롤 가능한 높이를 의미하며, srollTop은 현재 스크롤된 위치, clientHeight는 보이는 영역의 높이를 의미합니다.

 

따라서 처음에는 ((전체 스크롤 가능한 높이 - 현재 스크롤된 위치) == 보이는 영역의 높이) 상태일 때 스크롤이 끝까지 왔다고 판단하였으며, 테스트 결과 정상 동작하는 것을 확인했는데요.

 

이후 실제 사용자들이 해당 기능을 사용하는 과정에서 스크롤이 끝까지 내려왔을 때의 기능이 활성화되지 않는다는 문의를 받아 확인해 본 결과 브라우저 배율(낮아졌을 때)에 따라 위 계산 부분에서 소수점이 발생하여 == 이 성립되지 않는다는 문제를 확인했습니다.

 

해당 문제를 해결하기 위해 <= (gridBody.clientHeight + 1) 부분의 코드를 수정하여 브라우저 배율 또는 픽셀 반올림으로 인해 발생하는 오차를 보정하였으며, 브라우저 배율이 달라졌을 때도 정상 동작하는 것을 확인하였습니다.