1. 현재 진행 상황

22-07-14
Resoft 회사 사이트 만들어 오기.
팀 명: 보람 3조

내일이면 제출기한 마감일이라 오늘 최종적으로 체크해보기로 했다.
각자 한 부분에 대한 체크 항목을 따로 적어놓고, 다같이 화상으로 모여서 타인이 체크해 주기로 했다.

90%정도 완성된 상태이고, 체크를 해보고 이상이 있는 부분을 수정하면 될듯 싶었다.

2. 어려웠던 점 및 해결방안

스크롤 이벤트가 풀화면일때는 작동되는데, 중간화면이랑 작은화면에선 이벤트가 실행이 안되고 있어서 확인해봤다.

    Array.prototype.forEach.call(itemList, function(li) {
        // 객체 위치와 높이 비교 : 화면에 표출되는 높이인지 체크
        if(li.offsetTop < scroll) {
         함수이름()
        }
    });

저 offsetTop 부분이 이해가 안되서 콘솔에 찍어보니 위에서 부터 내가 스크롤이벤트시 보여주고 싶은 div 태그 윗부분 까지의 거리였다.

foreach문이 같이 있어야 작동이 되는 건줄 알았는데, 그건 전혀 상관없었고. 그냥 내 div 태그 li 리스트 중 제일 첫번째의 거리를 구하면 되는거였어서 다시 코드를 아래와 같이 정리하니 적용이 되었다.

let scrollEvent = function () {

   // 사용자 모니터 화면 높이 + 스크롤이 움직인 높이
   const scrollY = window.scrollY;
   const innerHeight = window.innerHeight;
   const scroll = (innerHeight * 0.9) + scrollY;
   // console.log(scroll);
   // Array.prototype.forEach.call(clientsImg, function(li) 
   // console.log(clientsImg[0].offsetTop < scroll);
   // console.log(clientsImg[0].offsetTop);
   // 객체 위치와 높이 비교 : 화면에 표출되는 높이인지 체크
   if (clientsImg[0].offsetTop < scroll) {

      overWidth1217();
      width1217();
      width940();
      // console.log('스크롤');
      // window.clearTimeout(clientListAni);
   }
   plusButton.addEventListener("click", clickButtonEvent);



}

구글링 해올때는 좀더 해당 코드에 대한 숙지를 다시 한번 느꼈다.. ㅠ

3. 소감

마지막을 향해 달려가고 있고 완성 할수 있을까 생각했던 게 우여곡절끝에 다 되어가는 모습을 보니 뿌듯함이 느껴졌다. 만약 이걸 혼자 하라고 했으면 했을까 싶다. 다들 잘 따라와 주셔서 감사할 따름이다. 무엇보다 피드백이 중요한데 한분도 빠짐없이 다들 자리해 주셔서 팀장으로서 감사했다.