stencil web component에서 iscroll 만들어보자

출처 : pixabay

 

마우스다운이벤트를 발생시켜 드래그시작 지점을 할당합니다.

@Listen('mousedown')
  mousedown(ev) {
    this.dragStart = ev.pageX;
 }

 

그리고 마우스업 이벤트를 발생시켜 드래그끝 지점을 할당합니다.

@Listen('mouseup')
  mouseup(ev) {
    this.dragEnd = ev.pageX;
  }

 

시작값과 끝값을 계산하여 변수에 할당 합니다.

let screenMove = this.dragStart - this.dragEnd;

 

그 값을 아래의 두 값과 함께 스크롤 이벤트에 할당합니다.

this.positionValue = this.el.shadowRoot.querySelector('.iscroll__container').scrollLeft;

 

가로스크롤을 싸고있는 컨테이너의 좌측좌표를 구하고

this.scrollTotal = this.el.shadowRoot.querySelector('.iscroll__inner').scrollWidth;

 

스크롤을 발생시키는 컨테이너의 총 길이를 구해서 다음의 함수로 이전의 계산의 값을 할당합니다.

private scrollMove(position, total, screenMove) {
    let scrollbar = this.el.shadowRoot.querySelector('.iscroll__container');

    if (position < 0) {
     console.log('감소')
     scrollbar.scrollTo({ left: screenMove });
    } else {
     console.log('증가')
     scrollbar.scrollTo({ left: screenMove });
    }
  }

 

이렇게 하면 마우스로 드래그를 구현할 수 있습니다.

모바일은 touchstart, touchend를 사용하시면 됩니다.

 

SMALL