자바스크립트 body 내 별도의 div박스에 스크롤 설정과 이벤트 부여

약관을 다 읽었는지 확인할 수 있는 용도 정도로 보이는
저 작은 박스를 다 내렸을때 알림버튼이 나오게 해줬다
코드를 한번 보겠다

     <div class="lorem bg-light">
      cLorem ipsum dolor sit amet consectetur adipisicing elit. Quo, blanditiis, sapiente ut repudiandae commodi pariatur eveniet tenetur asperiores harum esse perferendis cum, molestias error iure impedit mollitia quaerat maiores omnis.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, blanditiis, sapiente ut repudiandae commodi pariatur eveniet tenetur asperiores harum esse perferendis cum, molestias error iure impedit mollitia quaerat maiores omnis.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, blanditiis, sapiente ut repudiandae commodi pariatur eveniet tenetur asperiores harum esse perferendis cum, molestias error iure impedit mollitia quaerat maiores omnis.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, blanditiis, sapiente ut repudiandae commodi pariatur eveniet tenetur asperiores harum esse perferendis cum, molestias error iure impedit mollitia quaerat maiores omnis.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, blanditiis, sapiente ut repudiandae commodi pariatur eveniet tenetur asperiores harum esse perferendis cum, molestias error iure impedit mollitia quaerat maiores omnis.

    </div>

HTML의 경우에 간단 한 div박스에 클레스 이름을 임시로 저렇게 부여해주었고

.lorem{
    margin: auto;
    width: 400px;
    height: 100px;
    overflow-y: scroll;
}

css의 경우 중앙 정렬을 위한 margin을 주고
크기를 지정해줬다
그리고 가장 중요한 overflow-y !
높이를 지정해 주었는데 그 박스를 넘어가는 y축 텍스트는 스크롤로 변경되는 것이다 overfolow는 진역하여 과다 넘쳐난다 그런 뜻이니 직관적이죠?

const lorem =  document.querySelector('.lorem');

lorem.addEventListener('scroll', function(){
          if(lorem.scrollHeight-10 < lorem.scrollTop + lorem.clientHeight){
            alert('good');
          };
        })

이제 본격 자바스크립트이다 사실 문제는 여기서 생긴다
천천히 코드를 분석해보자
.lorem클래스를 가진 요소를 const lorem의 변수에 정의해준다
쿼리 셀렉터가 그런것이다

다음엔 그 요소에 이벤트를 부여해주겠다 스크롤 이벤트! 스크롤에 이벤트를 주는 것이다
if문을 쓸 것이다 스크롤에 어떤 액션이 있는 경우에 알림창을 띄우는 것이 나의 목표
이제 lolrm.~~~ 연산자를 이용하여 내가 필요한 높이에 대한 값들을 가져올 것이다
if문에는 세가지 연산자가 들어있으니 하나씩 살펴보자

scrollTop는 내가 스크롤한 양
clientHeight는 박스의 크기
scrollHeight는 이름 그대로 전체 높이다 보이는 박스의 길이 + 스크롤양

숫자로 적어도 되지만 그렇다면 박스의 크기를 지정해줄때마다 모두 찾아 손코딩을 해줘야할 일이다
우리는 전체 높이와 비교하여 내가 스크롤한 양과 박스의 길이가 같을때 알림창을 띄워줘야 한다
간단히 생각하자면 같을때 띄워주면 되지만 스크롤은 내리다 지나쳐서 좌표를 못잡는 경우도 있어서
오차범위로 10만큼을 주었는데 위 짤을 보시다 시피 여러번 나온다
미세한 조정은 추 후에 해보고 안정환 시킬 방법을 더 찾아보겠다.