자바스크립트 스크롤시 한 페이지씩 위로 올라오는 액션 구현 하는 방법
조회수 1265회
안녕하세요 자바스크립트 초보입문한지 얼마 안된 코린이입니다.
포트폴리오를 만드려고하는데 스크롤 한번 할때마다 한페이지씩 위로 올라오는 액션을 구현하고싶은데 아무리 구글링을해도 비슷한 내용도 찾아볼수가 없더라구요. 혹시 참고할만한 사이트나 코드가 있으면 부탁드립니다.
-
-
(•́ ✖ •̀)
알 수 없는 사용자 - 〉
1 답변
-
플러그인 fullpage.js 참고하세요
만약 바닐라로 짜고 싶으시면 제 응애실력으로 짜여진 자바스크립트 참고부탁드려요
<html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> </style> </head> <body style="margin:0; padding:0;"> <div id="1" class="scroll" style="margin:0; padding:0; width:100%; height:100%; background-color: gray"> <span style="font-size:70;"> 1 </span> </div> <div id="2" class="scroll" style="margin:0; padding:0; width:100%; height:100%; background-color: orange"> <span style="font-size:70;"> 2 </span> </div> <div id="3" class="scroll" style="margin:0; padding:0; width:100%; height:100%; background-color: blue"> <span style="font-size:70;"> 3 </span> </div> <div id="4" class="scroll" style="margin:0; padding:0; width:100%; height:100%; background-color: yellow"> <span style="font-size:70;"> 4 </span> </div> <script type="text/javascript"> var q = document.getElementsByClassName('scroll') var ls = window.pageYOffset; var arr = []; for (var i=0; i<q.length; i++){ arr.push(q[i].offsetTop) } window.addEventListener('resize', function() { arr = []; for (var i=0; i<q.length; i++){ arr.push(q[i].offsetTop) } }) document.addEventListener('scroll', function() { var cs = window.pageYOffset; for (var i=0; i < arr.length; i++){ if (cs > arr[i] && cs <= arr[i+1] && ls-cs < 0) { window.scroll({top:arr[i+1]}) ls = window.pageYOffset; break } else if (cs > arr[i] && cs <= arr[i+1] && ls-cs > 0) { if (arr[i-1] == undefined) { window.scroll({top:0}) } else { window.scroll({top:arr[i]}) } ls = window.pageYOffset; break } } }); </script> </body> </html>
댓글 입력