무슨 일이 일어났나요:. . . .
웹페이지 하단 부분은 로딩 후 자동으로 위로 올라가려면 3초 정도 기다려야 하기 때문에 Jquery의 animate 메소드를 사용했습니다.
$("#part2").animate({marginTop: " -= 800px"}, 8000);
Range, 이 방법을 사용한 후 마우스 휠로 제거할 수 없는 것으로 나타났습니다.
그래서 바퀴의 움직임을 모니터링하기 위해 js 코드 조각을 사용했습니다. 바퀴의 움직임이 있으면 part2 레이어가 바퀴를 따라 위아래로 미끄러질 수 있도록 margintop 속성을 수정합니다. .
드디어 기능이 구현된 것을 확인했는데, part2의 margin-top 속성이 무한대로 늘어나서 part2가 가끔 무한거리까지 내려가는 경우가 있어서 이때 혼란스러웠습니다.
$(document).on('mousewheel DOMMouseScroll', onMouseScroll); function onMouseScroll(e) { e.preventDefault(); var Wheel = e.originalEvent.wheelDelta || var delta = Math .max(-1, Math.min(1, 휠)); var part2= document.getElementById('part2'); if (delta < 0) {//아래로 스크롤 console.log('Scroll down' ); part2.style.marginTop =(parseInt(part2.style.marginTop) - delta*20) + "px"; (parseInt(part2.style.marginTop) + delta*20 ) + "px"; 여러분 모두 이해하신다는 걸 압니다. 저는 멍청한 놈입니다! 감사합니다!
