JavaScript : 스크롤 최하단 감지하기

포트폴리오를 다시 살펴보던 중 부자연스러운 부분을 발견하였다.
모바일 화면에서 보여지는 Nav의 위치가 영 이상했다.

❗나의 의도

• window.scrollY <= content.length*콘텐츠의 크기 이면 true.
• content의 부모요소에fixed라는 클래스가 붙고 margin-bottom이 변한다.

❌1차 구현

• content.length*콘텐츠의 크기는 고정값이 되어버린다.
• 내 경우는 scrollY보다 content.length*콘텐츠의 크기가 더 컸다.
• scrollY이 content.length*콘텐츠의 크기가 작으므로 조건은 언제나 true이다.

🤔그럼 어떻게 해야하지?

사실 정말 간단한 방법이 있었는데 뭐든 어렵게 보는 성향이라 멀리멀리 돌아서 왔다.
결국 내가 원하는 기능은 스크롤인 최하단까지 내려갔는가? 이기 때문에 스크롤의 위치가 최하단에 있는지를 감지하는 스크립트를 사용했다.

⭕2차 구현

window.addEventListener('scroll', () => {
  var isScrollAtBottom =
      window.innerHeight + window.scrollY >=
      document.body.offsetHeight;
  if (window.scrollY > 80) {
    setScroll(true);
    if (isMobile && isScrollAtBottom) {
      setFixed(true);
      setScrollEnd(true);
    } else {
      setFixed(false);
      setScrollEnd(false);
    }
  } else {
    setScroll(false);
  }
})

isScrollAtBottom는 boolean이라 조건이 성립하면 true를, 그렇지 않으면 false를 반환한다.

결과

✨성공