안녕하세요 제가 코딩을 공부한지 얼마 안되어 미숙해서 이렇게 글을 올리게되었습니다. 제가 특정 스크롤구간에서 넘버를 카운트하려하는데 이게 스크롤이 움직일때마다 계속 걸리더라구요 .. 제가 작성한 코드도 함께 올립니다. 피드백주시면 정말정말 감사드리곗습니다.
Copy
$(function(){
var numAnimation = document.querySelectorAll("#left_skill>ul>li>.skill_count")
function changeNum(idx){
var num = 0 ;
var intervalTime = 15;
var targetNum = numAnimation[idx].getAttribute('data-rate');
var timer = setInterval(function(){
++num;
numAnimation[idx].innerText = num;
if(num == targetNum){
clearInterval(timer);
}
},intervalTime);
}
window.addEventListener('scroll',function(){
scrollAmout = this.pageYOffset;
if(scrollAmout >800){
for(var i =0; i<numAnimation.length; i++){
changeNum(i);}
};
});
});
|
답변 2개
채택된 답변
+20 포인트
선택과집중
1년 전
방법은 여러가지인데
1. 동작을 표시해서 scroll 처리 이벤트에서 확인후 동작
1.1. 프로퍼티, 클래스, 애트리뷰트 어느 것을 사용하던지.
2. 한번 실행후 addEventListener로 등록한 이벤트 함수를 removeEventListener 로 삭제
이벤트 리스너 등록할 때
option에서 once 값을 줄 수 수 있는데, 위 조건 봐서는 once로 동작하기엔 부적절 한 듯.
1년 전
Copy
window.addEventListener('scroll',function(){
scrollAmout = this.pageYOffset;
if(scrollAmout >800){
for(var i =0; i<numAnimation.length; i++){
changeNum(i);}
};
});
위 부분을 아래처럼 한번 고쳐보세요.
Copy
changeMode = 1;
window.addEventListener('scroll', function() {
scrollAmout = this.pageYOffset;
if (changeMode && scrollAmout > 800) {
for (var i = 0; i < numAnimation.length; i++) {
changeNum(i);
changeMode = 0;
}
};
});
답변 작성하고 나니 뒷북이 되어 버렸네요.ㅜㅠ
답변을 작성하려면 로그인이 필요합니다.