<aside> 💡 ScrollTrigger.scrollerProxy(scroller: String | Element, vars: Object)

특정한 스크롤러 요소의 scrollTop 또는 scrollLeft의 getter/setter를 대체하여 부드러운 스크롤링 또는 기타 사용자 정의 효과를 구현할 수 있게 해줍니다.

</aside>

파라미터 (Parameters)

<aside> 💡 scroller: String | Element

"body"또는".container" 와 같은 선택자 텍스트 또는 스크롤러로 사용할 요소를 지정합니다.

</aside>

<aside> 💡 vars**: Object**

scrollTop 및/또는 scrollLeft 함수를 포함하는 객체로서 프록시된 getter/setter 역할을 하는 것, 예: {scrollTop: function(value) {...}, scrollLeft: function(value) {...}}. 또한 getBoundingClientRect(), scrollWidth(), scrollHeight() 메서드를 포함할 수 있으며 선택적으로 pinType: "fixed" | "transform"을 가질 수 있습니다.

</aside>

{
  scrollTop: function(value) {
    // scrollTop 값을 설정하거나 반환하는 함수 내용
  },
  scrollLeft: function(value) {
    // scrollLeft 값을 설정하거나 반환하는 함수 내용
  }
}

디테일 (Details)

특정 스크롤러 요소에 대한 scrollTop 및/또는 scrollLeft getter/setter를 장악하여 부드러운 스크롤링 또는 기타 사용자 정의 효과를 구현할 수 있게 해줍니다.

<aside> 💡 GreenSock의 ScrollSmoother는 ScrollTrigger 위에 구축된 부드러운 스크롤링 플러그인으로, 완전히 통합되어 사용이 매우 간편합니다. 다른 부드러운 스크롤링 라이브러리를 괴롭히는 대부분의 접근성 문제를 피하기 위해 기본 스크롤 기술을 사용합니다.

ScrollSmoother는 Club GreenSock의 회원 전용 혜택이지만, 선호하는 경우 3rd 파티 라이브러리를 사용할 수 있습니다. 이것이 scrollerProxy()가 존재하는 이유입니다. 다른 라이브러리를 지원하지는 않지만 예의상 인기있는 라이브러리와 함께 몇 가지 데모를 아래에 포함시켜 두었습니다.

</aside>

어떻게 작동하나요?

보통 ScrollTrigger는 스크롤러 요소의 일반 속성/메서드를 통해 스크롤 위치를 직접 가져오거나 설정하지만 사용자 정의 경험을 제공하기 위해 자체 getter/setter 함수를 제공할 수도 있습니다.

// 3rd party library setup:
const bodyScrollBar = Scrollbar.init(document.body, { damping: 0.1, delegateTo: document });

// Tell ScrollTrigger to use these proxy getter/setter methods for the "body" element: 
ScrollTrigger.scrollerProxy(document.body, {
  scrollTop(value) {
    if (arguments.length) {
      bodyScrollBar.scrollTop = value; // setter
    }
    return bodyScrollBar.scrollTop;    // getter
  },
  getBoundingClientRect() {
    return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
  }
});

// when the smooth scroller updates, tell ScrollTrigger to update() too: 
bodyScrollBar.addListener(ScrollTrigger.update);