JS : 한 화면 단위 scroll 지나가는 스크립트
* 스크롤 조정 시 viewport 기준 한 화면 단위로 스크롤이 지나갑니다.
* 아래와 같이 HTML/CSS/JS를 작성하면 별도의 라이브러리 없이 간단히 사용이 가능합니다.
HTML)
<div class="box" style="background-color:red;">1</div>
<div class="box" style="background-color:orange;">2</div>
<div class="box" style="background-color:yellow;">3</div>
<div class="box" style="background-color:green;">4</div>
<div class="box" style="background-color:blue;">5</div>
<div class="box" style="background-color:indigo;">6</div>
<div class="box" style="background-color:violet;">7</div>
CSS)
html,body{ margin:0; padding:0; width:100%; height:100%;}
.box{ width:100%; height:100%; position:relative; color:#ffffff; font-size:24pt;}
JS)
// 적용할 클래스명
//var className = "box";
// 지금의 스크롤 위치를 담을 변수
var currentScroll = 0;
// 에니메이션 효과를 주기위한 function 명 선언
var tim;
window.onload = function () {
/* Div Class 명 */
// box클래스 추출
var box = document.getElementsByClassName('box');
// box클래스 개수만큼 실행
for (var i = 0; i < box.length; i++) {
// box 에 각각 마우스 휠 감지
// 휠감지
box[i].addEventListener("mousewheel", MouseWheelHandler, false);
//box[i].onmousewheel = function(){MouseWheelHandler};
// firefox 용 휠처리
box[i].addEventListener("DOMMouseScroll", MouseWheelHandler, true);
}
}
function MouseWheelHandler(e) {
// 스크롤 취소시킴(이걸 안할경우 도중에 명령을 받아 화면이 덜덜 거릴수 있음)
e.preventDefault();
// 휠값처리
var delta = 0;
if (!event) {event = window.event;}
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
if (window.opera) {delta = -delta;}
}
else if (event.detail){
delta = -event.detail / 3;
}
// 여러개일경우 다른 selector 을 확인하기위한 상위 dom 으로 이동
var p = e.target.parentElement;
// 몇번째 dom 인지 저장
var index = Array.prototype.indexOf.call(p.children, e.target);
// 같은 위치의 돔목록 을 저장
var boxArr = e.target.parentElement.children;
// 지금의 스크롤 위치 저장
currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
// 다음위치의 좌표(기본이므로 현재의 Y 좌표 저장)
var NextTarget = currentScroll;
// 마우스휠 위로
if (delta > 0) {
// 맨처음 지점 제외
if (index > 0) {
// 이전 dom 의 index 번호
var no = (index - 1);
// 좌표위치 저장
NextTarget = boxArr[no].offsetTop;
}
}
// 마우스휠 아래로
else if (delta < 0)
{
// 맨마지막 지점 제외
if (index < boxArr.length - 1) {
// 다음 dom 의 index 번호
var no = (index + 1);
// 좌표위치 저장
NextTarget = boxArr[no].offsetTop;
}
}
// 애니메이션
// 필요없으면 바로 window.scrollTo(0, NextTarget);
// 에니메이션 초기화
clearInterval(tim);
// 애니메이션 실행
tim = setInterval(tran, 1);
// 애니메이션 function
function tran() {
// 이동속도 숫자가 작아질수록 느려짐
var speed = 5;
// 현재 스크롤과 이동후 스크롤이 같으면 정지시킨다
if (currentScroll == NextTarget) {
clearInterval(tran);
} else {
// 스크롤을 위로 올릴 경우
if (currentScroll - speed > NextTarget)
{
currentScroll -= speed;
}
// 스크롤을 내일 경우
else if (currentScroll + speed < NextTarget)
{
currentScroll += speed;
}
// 스크롤이 속도로 지정된 변수보다 작을 경우 강제적으로 맞춰준다
else
{
currentScroll = NextTarget;
}
// 스크롤위치 변경
window.scrollTo(0, currentScroll);
}
}
}
Comments, Trackbacks