동시에 여러 컨테이너의 스크롤 잠금

안녕 친구들! 우리 모두는 Github 또는 다른 소스 제어 공급자의 커밋 비교자를 보았을 것입니다. 거기에는 동시에 스크롤되는 두 개의 컨테이너가 있습니다.
동시에 두 파일의 같은 장소.

이런 얘기를 하고 있는데...


JavaScript와 Css를 사용하면 웹에서 이를 달성하는 것은 매우 간단합니다.

예제를 만들었지만 수평입니다. 예! 꽤 이상해 보이지만 여기서 보여주고 싶은 주요 사항은 스크롤링입니다.

여기에서 스크롤 섹션 또는 컨테이너에 스크롤 이벤트 리스너를 할당하고 스크롤 대상의 scrollLeft 속성에 액세스할 수 있습니다.

f.addEventListener('scroll', (e) => {
    console.log(e.target.scrollLeft);
  }
});

이제 두 번째 컨테이너의 scrollLeft에 scrollLeft 값을 할당하고 작업 데모를 볼 수 있습니다. 그리고 예, 첫 번째 컨테이너에 대해서도 동일한 작업을 수행할 수 있으므로 두 번째 컨테이너를 스크롤하면 첫 번째 컨테이너도 스크롤됩니다.

f.addEventListener('scroll', (e) => {
    s.scrollLeft = e.target.scrollLeft;
  }
});

하지만 이제 문제가 생겼습니다. 스크롤 막대가 더듬거리는 것을 확실히 알 수 있습니다. 더 이상 부드럽지 않습니다. 컨테이너의 scrollLeft 값을 설정하면 스크롤 이벤트가 트리거되기 때문입니다.

이를 해결하기 위해 디 바운싱을 사용합니다. 우리는 isFirstScrolling과 isSecondScrolling이라는 두 가지 변수를 유지합니다. 이것을 사용하여 다른 하나가 스크롤하는지 여부를 추적하고 해당 컨테이너의 스크롤 위치를 업데이트할 수 있습니다. 스크롤 중이면 스크롤 값을 업데이트하지 않아야 합니다. 이로 인해 끊김 현상이 발생합니다.

f.addEventListener('scroll', (e) => {
  if(!isSecondScrolling) {
    isFirstScrolling = true;
    customDebounce("first");
    s.scrollLeft = e.target.scrollLeft;
  }
});

s.addEventListener('scroll', (e) => {
  if(!isFirstScrolling) {
    isSecondScrolling = true;
    customDebounce("second");
    f.scrollLeft = e.target.scrollLeft;
  }
});

customDebounce 함수는 스크롤이 끝나면 스크롤 추적기를 false로 설정하는 데 도움이 됩니다.

let timeOut;

const customDebounce = (tracker) => {
  console.log(timeOut);
  clearTimeout(timeOut);
  console.log("cleared",timeOut);
  timeOut = setTimeout(() => {
    if(tracker === "first")
      isFirstScrolling = !isFirstScrolling;
    else
      isSecondScrolling = !isSecondScrolling;
  }, 700);
}

그래서 이것으로 우리는 우리의 작업 예제를 가지고 있습니다.


친절하게 코드를 확인하고 추가 게시물을 개선하기 위해 귀중한 피드백을 제공하십시오.

감사합니다.