요소 이동 후 콜백

나는 list that scrolls up using velocity이 있습니다. 나는 매번 소리를 내고 싶다. 목록의 처음 보이는 항목이 위로 스크롤된다. 이벤트를 처리 또는 각 요소 또는 전체 목록은 예를 62px를 들어, 특정 픽셀에 의해 스크롤 할 때 변경 사항을 추적하는 방법 요소 이동 후 콜백

<div class="viewport" data-winner=""> 
    <ul class="participants-holder container" id="ph"> 
    <li>...<li> //many li elements 
    </ul> 
</div> 

moveToEl(name) { 
    ... 
     $(container).velocity({ 
      translateY: -(offsetToScroll)+'px' 
     }, { 
      duration: 15000, 
      easing: [.74,0,.26,1], 
      complete: (el) => { 
       ... 
       // complete animation callback 

      }, 
      progress: (els, complete, remaining, start, tweenVal) => { 
       console.log(Math.floor(complete * 100) + '%') 
       // I think some check should do during progress animation 
      } 
     }) 
}

. 이 문제를 어떻게 감지하고 콜백 함수를 호출 할 수 있습니까?

출처

2017-03-13 David

제 3 자 사이트뿐만 아니라 질문 자체의 모든 관련 코드를 [mcve]에 입력하십시오. –

@MikeMcCaughan 선생님, 코드 일부를 추가했습니다. – David

당신은 https://stackoverflow.com/a/42267490/1544886에서 +this.container.style.transform.replace(/[^0-9.]/g, '');
같은 것을 사용하여 현재 TranslateY 발견하고 이전 값을 더한 오프셋에 비교할 수 있습니다.

Roulette 클래스에는 이전 값을 저장하기 위해 this.prevTranslatePos = 0.0;이 추가됩니다. 에 적용

progress: (els, complete, remaining, start) => { 
    // from https://stackoverflow.com/a/42267490/1544886 
    var translatePos = +this.container.style.transform.replace(/[^0-9.]/g, ''); 

    if (translatePos >= (this.prevTranslatePos + 62)) 
    { 
     //console.log(translatePos, this.prevTranslatePos); 
     this.prevTranslatePos = translatePos; 

     this.sound.pause(); 
     this.sound.currentTime = 0; 
     this.sound.play(); 
    } 
}

데모 유일한 'Go To'버튼 : 그것은 너무 빨리 실행하면 소리가 그만두는 것을 http://codepen.io/anon/pen/yMXwgd?editors=1010

주,하지만 몇 가지 방법으로 처리 할 수 있습니다.

출처

2017-03-13 23:05:49

귀하의 질문에 대한 구체적으로 내 대답을 업데이 트하고 데모를 제공했습니다 –

scroll eventListener를 목록의 부모 요소에 추가하십시오 (귀하의 경우에는 participants-holder이라고 생각됩니다). 그리고 마지막 검사 이후에 올바른 양의 픽셀이 이동했는지 여부를 검사합니다. 현재 위치를 저장하고 원하는 금액을 마지막으로 이동 한 시간과 비교하십시오.

희망 하시겠습니까?

출처

2017-03-13 22:10:37 Pabs123

내 작업과 관련된 좋은 아이디어지만 '스크롤'이벤트는 영향을 미치지 않습니다. 내가 목록을 이동 CSS를 변환을 사용하고 있습니다 – David

답변

관련 문제