<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>MouseWheel</title>
<style type="text/css">
html,body{ margin:0; padding:0; width:100%; height:100%;}
.box{ width:100%; height:100%; position:relative; color:#ffffff; font-size:24pt;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var elm = ".box";
$(elm).each(function (index) {
// 개별적으로 Wheel 이벤트 적용
$(this).on("mousewheel DOMMouseScroll", function (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;
var moveTop = $(window).scrollTop();
var elmSelecter = $(elm).eq(index);
// 마우스휠을 위에서 아래로
if (delta < 0) {
if ($(elmSelecter).next() != undefined) {
try{
moveTop = $(elmSelecter).next().offset().top;
}catch(e){}
}
// 마우스휠을 아래에서 위로
} else {
if ($(elmSelecter).prev() != undefined) {
try{
moveTop = $(elmSelecter).prev().offset().top;
}catch(e){}
}
}
// 화면 이동 0.8초(800)
$("html,body").stop().animate({
scrollTop: moveTop + 'px'
}, {
duration: 800, complete: function () {
}
});
});
});
}
</script>
</head>
<body>
<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>
</body>
</html>
ie 일 경우 ie 6 이하의 브라우저에서 안됨 이때에는 head에<meta http-equiv="X-UA-Compatible" content="IE=edge">
를 넣어줘야한다
추가 (좌우)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>MouseWheel</title>
<style type="text/css">
html,body{ margin:0; padding:0; width:100%; height:100%;}
.boxwrap{ display: table; table-layout: fixed; width: 700%; height: 100%; table-layout: fixed;}
.box{ display: table-cell;position:relative; color:#ffffff; font-size:24pt;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var elm = ".box";
$(elm).each(function (index) {
// 개별적으로 Wheel 이벤트 적용
$(this).on("mousewheel DOMMouseScroll", function (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;
var moveTop = $(window).scrollLeft();
var elmSelecter = $(elm).eq(index);
// 마우스휠을 위에서 아래로
if (delta < 0) {
if ($(elmSelecter).next() != undefined) {
try{
moveTop = $(elmSelecter).next().offset().left;
}catch(e){}
}
// 마우스휠을 아래에서 위로
} else {
if ($(elmSelecter).prev() != undefined) {
try{
moveTop = $(elmSelecter).prev().offset().left;
}catch(e){}
}
}
// 화면 이동 0.8초(800)
$("html,body").stop().animate({
scrollLeft: moveTop + 'px'
}, {
duration: 800, complete: function () {
}
});
});
});
}
</script>
</head>
<body>
<div class="boxwrap">
<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>
</div>
</body>
</html>
좀 복잡한 방법 : Jquery 한화면 단위 Mouse Wheel 이동 (응용)
감사합니다 덕분에 문제 잘 해결되었어요
답글삭제포트폴리오 용도로 사용가능할까요?!
답글삭제잘보고갑니다~
답글삭제감사합니다~ 잘사용하도록 하겠습니다~
답글삭제너무너무 감사합니다.!!!!!
답글삭제잘보고 갑니다.
답글삭제감사합니다!!!
퍼가겠습니다 감사합니다.
답글삭제너무너무 감사합니다(__)
답글삭제감사합니다. 잘 쓰겠습니다.
답글삭제써도 되는가요? 그렇다면 잘쓰겠습니다. 안되서 엄청 붙잡고 있었는데 ㅜ
답글삭제좋은 소스 감사합니다. !!
답글삭제감사합니다
답글삭제easing값을 넣어주고 싶은데 어디에 어떤 형식으로 넣어주면 되나요?
답글삭제javascript CDN 추가하시구요 -> http//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js
삭제----
// 화면 이동 0.8초(800)
$("html,body").stop().animate({ scrollTop: moveTop + 'px'}, 800,"easeOutBounce");
----
이부분 수정하시면 될거예요
감사합니다~~
답글삭제ie 에서 event.wheelData 값이 undefined 가 나오는 것은 어떻게 하면 수정될까요?
답글삭제html 에 ie=edge 설정되어 있나 봑인해보세요.
삭제혹시 background color대신 background-image로 하고싶은데... 단순히 속성 변경만으로는 안되는거죠?
답글삭제가능합니다.
삭제아! 방금 안그래도 적용해봤습니다 ^^ 감사합니다 소스 참고 잘하고있어요. 근데 혹시.. 좌우로 휠 넘기는방법부분은 어떻게 구현하나요..?
삭제if (event.wheelDelta) {
delta = event.wheelDelta / 120;
if (window.opera) delta = -delta;
} else if (event.detail) delta = -event.detail / 3;
이부분을 분석하면 될것같은데..ㅠㅠ
좌우로 휠하기 위해서는 .box 가 위아래로 배치되지 않고 좌우로 되게 구성한 다음에 offset().top 대신 offset().left를 써야될거예요. 그리고 animate 에서 scrollTop 가 아니라 scrollLeft 로 구현해야 될것이구요.
삭제감사합니다, 근데 자꾸 화면이 깨져서요ㅠㅠ( 이미지도 반밖에 안넘어가고..)
삭제delta = event.wheelDelta / 120;
if (window.opera) delta = -delta;
이부분이 이해가 잘안되는데,
혹시 조금만 설명 더 붙여주실 수 있을까요 ㅠㅠ .box를 좌우로 구성하라시는것도 style상 말씀하시는거죠?
event.wheelDelta 이거는 마우스 이벤트에서 휠이벤트에 대한 값입니다.
삭제window.opera 이거는 오페라 브라우저일 경우에 다른값이 나와서 변경해주는거구요.
휠로 좌우로 하는건 내용에 추가해 놓겠습니다 ㅋ..
너무감사합니다ㅠㅠ 지금 이벤트 하나하나 공부중인데, 다들 부트스트랩 뭐 이런걸 많이 쓰네요... 슬라이드로. 코드하나하나 분석해봐야겠어요 ㅠㅠ너무너무감사합니다!!!!!
삭제하나만 더 여쭤볼께요ㅠㅠ 그
삭제delta = event.wheelDelta / 120;
delta = -event.detail / 3;
이 두개 계산법이 이해가안되는데.. 혹시 이것도 이미지 크기에 따라(제가 이미지를 넣을꺼라서요) 다르게 적용해야할까요?
탭메뉴버튼 누르면 fadeIn효과로 메뉴마다 이미지가다르고,
또 휠버튼은 휠대로 이미지가 차례로넘어가고 두개 동시적용을 해야하거든요ㅠㅠ
소스 상에 보시면 아시겠지만 box 클래스에 마우스휠 이벤트를 각각(echo) 준 예제입니다. 상황에 따라서 다른 클래스를 생성해서 추가가능합니다.
삭제안녕하세요! 적용 잘 해서!! 잘 마무리지었습니다.
삭제근데 궁금한게, script에서 $(document).ready(function () { 안에다가 mousewheel event를 넣으면 왜 두번이 적용되는지.. 이해가안가서요. 따로 script function으로 빼야 제대로 작동하더라구요. 혹시 답변해주실 수 있으신가 해서ㅠㅠ 감사합니다!
밑에 푸터섹션을 넣으면 안넘어가는데 어떻게 수정해야하나요 ㅠㅠ 죄송합니다.. 사수도없고 혼자하다보니 어려움이 많네요 ㅠㅠ
답글삭제소스상 // 마우스휠을 위에서 아래로
삭제조건문에 $(elmSelecter).next() == undefined 일 경우를 추가로 하고
footer의 document 상 위치를 moveTop 값으로 설정
moveTop = $("footer").offset().top;// 이런식으로
수정해야 되겠죠.
작성자가 댓글을 삭제했습니다.
삭제혹시 섹션1에서 마우스휠내리면 섹션2로 가고
답글삭제섹션2에서 마우스휠을 올리면 섹션 1로 가게만 가능할까요?
ㅠㅜ 아무리 굴려도 마우스 휠 이벤트가 같이 작동이 되서 제가 원하는대로 안되더라고요 ...
var elm = ".box";
삭제box 클래스를 2개만 쓰면 간단하게 될텐데요
<div class="box" style="background-color:red;">1</div>
<div class="box" style="background-color:orange;">2</div>
아 제가 원하는건 div가 3개 이상인데
삭제첫번째 div에서 휠을 내리면 두번째 div로 가게하고
두번째 div에서는 휠을 올리면 첫번째 div로 가는데
휠을 내리면 animate가 작동안되고 정상적으로 스크롤 내려가게끔 하는겁니다.ㅜㅠ
그러면 한꺼번에 주는게 아니라 분리를 해서 해야될거예요 합칠건 합치고 분리할건 해서요.
삭제17번째줄의
$(this).on("mousewheel DOMMouseScroll", function (e) {
이부분을
$("#div1").on("mousewheel DOMMouseScroll", function (e) {
이런식으로요
감사합니다.
삭제마지막으로 //마우스휠을 위에서 아래로 이경우에서
if (delta < 0) {
if ($(elmSelecter).next() != undefined) {
try{
moveTop = $(elmSelecter).next().offset().top;
}catch(e){}
}
HTML, BODY의 animate안주고 다른 일반 사이트처럼 내려가게 할려면 어떻게 해야할까요,...? ㅜ
animate 대신에 $(window).scrollTop(MoveTop); 넣으면 될텐데요
삭제제가 말을 잘못적었나봅니다.
삭제작성자님께서 적용한 스크립트는 모든 DIV에서 휠이벤트가 적용되는데
제가 원했었던건 두번째 DIV에서 휠을 올리면 자동으로 첫번째 DIV로 가고
휠을 내리면 휠이벤트가 적용이 안되서 세번째 DIV까지 휠을 내려서 가게끔 하는겁니다.
제가 원했었던건 두번째 DIV에서 휠을 올리면 자동으로 첫번째 DIV로 가고
삭제두번째 DIV에서 휠을 내리면 휠이벤트가 적용이 안되서 세번째 DIV까지 휠을 내려서 가게끔 하는겁니다.
window.onload = function () {
삭제var elm = ".box";
var index = 1;
$(elm).eq(index).on("mousewheel DOMMouseScroll", function (e) {
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;
var moveTop = $(window).scrollTop();
var elmSelecter = $(elm).eq(index);
// 마우스휠을 위에서 아래로
if (delta < 0) {
moveTop += 80;
// 화면 이동 0.8초(800)
$("html,body").scrollTop(moveTop);
// 마우스휠을 아래에서 위로
} else {
e.preventDefault();
if ($(elmSelecter).prev() != undefined) {
try {
moveTop = $(elmSelecter).prev().offset().top;
} catch (e) { }
}
// 화면 이동 0.8초(800)
$("html,body").stop().animate({ scrollTop: moveTop + 'px' }, { duration: 800, complete: function () { } });
}
});
}
대충 이런 방식 아닌가요?
정말 감사합니다 ㅠㅜ
삭제스크롤이 흔들리는 상황이 생기는데 이건 제이쿼리로는 무리인가요?
스크롤시 덜덜 거리는건 moveTop += 80 이 너무 커서 그럴거예요 60 정도로 줄여보세요 ㅋ..
삭제저도 윗분처럼 첫번째 섹션만 마우스휠 위아래로 스크롤되게 적용하고 그 밑 섹션들엔 이벤트적용하지 않게 하고싶은데 ㅠㅠ..
답글삭제전 아래에서 위로 스크롤할때만 딱 한번 적용되고 작동이 안되는데 왜이럴까요..
14번째줄 보시면 $(elm).each(function (index) {
삭제이부분이 전체적으로 이벤트를 넣어줄수있더록 하는 부분입니다.
컨트롤 하시려는 elm 이 몇번째인지 확인한다음에 조건문으로 해당 부분만 적용해도될것입니다.
첫번째만 적용이라면 if(index==0){ /*이벤트 적용구간 */ } 하시면 될듯하네요.
그리고 다른곳은
$(this).on("mousewheel DOMMouseScroll", function (e) {
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;
// 마우스휠을 위에서 아래로
if (delta < 0) {
// 마우스휠을 아래에서 위로
} else {
e.preventDefault();
var moveTop = $(window).scrollTop();
var elmSelecter = $(elm).eq(index);
if ($(elmSelecter).prev() != undefined) {
try {
moveTop = $(elmSelecter).prev().offset().top;
} catch (e) { }
}
// 화면 이동 0.8초(800)
$("html,body").stop().animate({
scrollTop: moveTop + 'px'
}, {
duration: 800, complete: function () {
}
});
}
});
이런식으로 변형을 해도..
안녕하세요! 잘안되는 부분이 있어서 질문드립니다
답글삭제첫번째 섹션에서 위로 스크롤하면 스크롤의 움직임이 없었으면 하는데
화면의 2분의1정도만큼 밑으로 스크롤되더라구요
이부분은 어떤식으로 수정하면 좋을까요??ㅠㅠ
14번째줄 보시면
삭제$(elm).each(function (index) {
if(index==0){
}else{
$(this).on("mousewheel DOMMouseScroll", function (e) {
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;
// 마우스휠을 위에서 아래로
if (delta < 0) {
// 마우스휠을 아래에서 위로
} else {
e.preventDefault(); // 휠을 화면단위로 하기 위해 기존들어온 휠 이벤트 취소시킴
var moveTop = $(window).scrollTop();
var elmSelecter = $(elm).eq(index);
if ($(elmSelecter).prev() != undefined) {
try {
moveTop = $(elmSelecter).prev().offset().top;
} catch (e) { }
}
// 화면 이동 0.8초(800)
$("html,body").stop().animate({
scrollTop: moveTop + 'px'
}, {
duration: 800, complete: function () {
}
});
}
});
}
}
이런 식으로 index 의 순서에 따라 조정하시되 e.preventDefault(); 를 넣어서 기능을 정지시키던지 하시면 될듯하네요.
삭제.box단위 스크롤을 한 뒤 몇 초간 스크롤 방지를 하고싶습니다. https://www.29cm.co.kr/home/about 방식의 스크롤을 구현하고 싶은건데요! 스크롤에만 delay주는 방식을 어떻게 구현할까요?
답글삭제플래그형 변수(ex. var active=true)를 주고 조건에 따라 실행이되고 안되게 하면 될것이고 실행이 될때 변수값을 바꿔 재실행을 방지하고 setTimeout 을 이용하여 일정딜레이 후에 다시 변수를 조정해주면 될것 같네요.
삭제만약 .box들의 부모요소로 .container 로 묶어두고
답글삭제.container 의 형제로 높이 300px 짜리 footer요소를 아래에 박아넣은다음에
푸터까지 같이 원페이지로 만들고 싶은데 가능할까요?
30번째줄의 조건문
삭제if ($(elmSelecter).next() != undefined) {
는 .box의 마지막이 아닐 경우 동작하게 하는것입니다. 따라서 else 를 추가하고 footer에 대한
offset().top 을 moveTop의 값으로 지정해주면 될거구요.
추가로 footer "mousewheel DOMMouseScroll" 를 추가해서 지정하면 될것 같습니다.
Div height 크기가 다다른 경우 어떻게 처리해야할 지 모르겠습니다...
답글삭제Style 에서 수정하면 될거같습니다.
삭제예) .box:nth-child(3){ height:auto;}
아니면 .box의 height 를 지워버리거나요
이부분은 알려주신데로 해결했습니다. 감사합니다.
삭제근데 현재 KT홈페이지 처럼 아무곳에서나 마우스 휠 작동 시에도 div칸칸히 움직이는 부분은 혹시 아실까해서 답글남겨봅니다 ㅠㅠ
kt.com 에서 사용하는건 그냥 기능만 놓고 보자면 휠 이벤트 보다는 스크롤 이벤트를 사용하는게 더 효율적으로 보이네요.
삭제$(window).scroll(function(){
var sc= $(this).scrollTop();
$("body").append(sc +"
");
});
sc의 위치에따라 스크롤을 움직이는것이..
답변 감사합니다. 제 머리가 한계인건지 잘 안되네여 이 이벤트 한개 남았는데..ㅠㅠ 롤링보다 어려운거 같아요...
삭제모바일이나 태블릿일 경우에는 어떻게 스크립트를 짜야할까요?
답글삭제모바일이나 태블릿은 휠 이벤트로 검색하는것보다는 touch 로 찾아보시는게 좋을것 같네요..
삭제https://amajoy.tistory.com/entry/jquery-touch-event-%EC%A2%85%EB%A5%98
button class="down" 을 누르면 스크롤을 내리고싶은데 어떻게 추가해야될까요.. js 완전 초보에요 ㅠㅠ
답글삭제늦게 봤네요.
삭제// 버튼을 눌렀을 경우
$('.down').on('click',function(){
// 위에서 1000px 아래로 내림 0.8초동안
$("html,body").stop().animate({ scrollTop: '1000px' }, { duration: 800, complete: function () { } });
});
이렇게 하면 될건데요 원하시는게 다른것일까요? 만약에 지금 위치를 계산해서 하는거라면 좀더 복잡해지겠죠..
상하좌우 같이 쓰려면 어떻게 해야하나요??
답글삭제소스에서 보시는거를 좀 응용해야되겠죠. 소스에서는 ".box" 를 echo 로 한번씩 이벤트를 주었는데 중간에 좌우로 움직여야 하는곳에서는 다른 클래스 명으로 추가해서 좌우로 움직이게 하고 처음에서 위로 올린다면 $(this).parents(".box").first().prev().offset().top 이런식으로 알아내서 올려주고 맨끝에서 다음으로 내린다면$(this).parents(".box").first().next().offset().top 이런식으로 알아내서 올리면 될듯하네요.
삭제안녕하세요~
답글삭제풀페이지 제작중인데, 검색하다가 우연히 찾게되었습니다 :)
너무 잘만드신것같아서 사용을하고싶은데 혹시, 기업홈페이지 만들때 사용해도 괜찮을까요 ㅜㅜ
예 가져다쓰세요 ㅎㅎ;
삭제감사합니다 ㅜㅜ 정말정말 필요했는데 정말정말 감사합니다 잘쓰겠습니다 복받으세요~
삭제제가 각페이지가 800px정도의 배너형식으로 웹페이지를 제작중인데 한페이지가 화면에 꽉차는게 아니니라그런지 스크롤을 내리면
답글삭제화면상단에 시작점이 고정되더라구요 혹시 스크롤을 내리면 화면중앙에 배너가 고정되게 할수있을까요??
그리고 상단메뉴와 브랜드 로고가 따로 있는상태에서는 js를 적용시키니 상단메뉴쪽은 스크롤이 안되더라구요 혹시 어느걸 수정하면 상단메뉴가 보이는 홈화면에서 스크롤을 내리면 한페이지씩 스크롤이 될까요?
삭제내릴경우 상단으로 맞추는 것은
삭제moveTop = $(elmSelecter).next().offset().top;
이부분입니다. 이부분을 배너가 가운데오도록 하려면
moveTop = $(elmSelecter).next().offset().top - (screen.height - $(elmSelecter).next().find(".banner").height())/2;
이런식으로 별도로 연산을 해주어야겠죠 실제 해보지 않아서 잘못된 연산일수도 있지만...일단적어봅니다.
그리고 상단 메뉴에 안보이는것은 겹쳐서 뒤로 간것인가요? 제가 css 처리한것이 position:relative; 로 선언되어서 상단 메뉴와 브렌드 로고쪽에 position 이 설정되어있지않거나 relative일경우 z-index 처리 안할경우 뒤로 갈 수 있습니다.
작성자가 댓글을 삭제했습니다.
답글삭제작성자가 댓글을 삭제했습니다.
답글삭제작성자가 댓글을 삭제했습니다.
답글삭제공개해주신 소스와 댓글들을 참조해서 테스트 중인데요 한가지 해결이 안되는 부분이 있어 문의드립니다.
답글삭제footer로 사용하려고 마지막 box의 height가 200px정도로 작을 경우 휠을 올리면 바로위 box가 아니라 한칸을 넘어서 위로 가더라구요.
예를 들어 box1,2,3,4가 있고 box4가 height 200px정도일 경우 휠을 올리면 box3이 아니라 box2로 바로 가 버립니다.
이래저래 고민하고 테스트했는데 결과가 영 신통찮아서 문의 좀 드려봅니다.
한참동안 안들어오다보니 답변이 늦었네요. 마우스에서 휠을 하였을 때 휠위치의 .box 기준으로 이전 .box의 상단위치를 체크하여 올리는 소스입니다. 최하단이 200px이고 바로위 .box를하시려면 화면상 동작되지 않을것입니다. 제가 생각하기에 foroe님은 .box 3번째것에서 휠을 돌려 그러한 현상이 일어난듯 합니다. 이에 따라 조건을 추가하셔야할듯합니다. .box 3번째에서 휠을 했을 때 .box의 3번째 offset().top 위치보다 클경우에는 3번째 offset().top 의 위치로 되게 말이죠..
삭제죄송한데 코드 작성을 좀 해주시면 안될까요 ㅠㅠ
삭제요즘 정신없이 바쁘다보니... 늦었지만 소스로 올립니다.
삭제https://jsfiddle.net/2nusa/2mjepznx/1/
완전 초보라 올려주신 소스 참고하면서 해보고 있는데요 ㅠㅠ
답글삭제혹시 이게 위아래 스크롤 1080px씩 움직이게는 불가능할까요 ..?
.box 의 크기를 1080px로 하시거나 if문을 이용하여 $(window).scrollTop() 의 위치에 따라 특정위치로 가게끔 하시면 될듯하네요.
삭제안녕하세요! 공유해주신 소스를 사용해 홈페이지를 제작하고 있는데,
답글삭제중간에 모달을 넣으면
$("버튼이름").click(function(){
$("html").css({overflowY:"hidden"});
를 적어 넣어도 모달 스크롤바는 마우스 휠을 움직여도 움직이지 않고,
배경만 스크롤바가 움직이며 이동되더라구요ㅠㅠ 어디를 어떻게 손봐야 할까요?
모달 창에 e.stopPropagation(); 를 추가해야 할 것 같습니다. 자세한 소스를 못봐서 일단 기존의 소스에 임의적으로 하나 추가해서 생성해봤습니다. 참고해보세요.
삭제https://drive.google.com/file/d/1BEPnx93d1FKHZRaHsbr9xZAPODedLmNt/view
하단스크롤바를 없애고 싶은데요 body에 overflow:hidden으로 했을경우 하단스크롤바가 없어지긴 하지만 스크롤 넘겨지는 작동은 2번box만 작동됩니다 ㅠ 이거 이렇게 하는방법 아니죠..? 어떻게 하단스크롤바를 없앨 수 있을 까용?
답글삭제하단 스크롤바는 없애는 것은 css로 처리하는게 맞습니다. 그리고 휠이나 스크롤 이벤트가 발생한다면 그에 따른 처리를javascript 로 처리하구요 이때는 좀 하나하나 컨트롤해야되구요. 또 쉽게가는 방법중에 하나는 < div class="box1" >< div class="box2" >< /div >< /div > 와 같은 html에서 .box1에 overflow:hidden 을 하고 그 안에 .box2 를 .box1 보다 스크롤사이즈만큼 크게 만들어서 감추는 방법도 있구요. 방법은 여러가지네요 소스를 올려주시지 않아서 서술형 답변으로 했습니다;;
삭제위에 댓글보니 푸터로 내려갈수 있게 할려면 코드를 더 추가해야한다고 하셨는데..
답글삭제정확히 어떻게 추가해야하는지 여쭤봐도 될까요 ㅠ 초보라서 어떻게 넣어할지 감이 안잡히네요ㅠ
주석에 보시면 // 마우스 휠을 아래로 소스상 보면 이부분이 다음 element 가 있을 경우를 체크하는부분입니다.
삭제if ($(elmSelecter).next() != undefined)
만약 다음 element가 없다면 else 조건으로
moveTop = $("footer").offset().top;
이런식으로 주시면 될것 입니다.
우측에 네비게이션을 넣었는데 페이지 이동할 때 마다 페이지에 해당하는 네이게이션에 class 붙을 수 있게 하려면 어떤거를 추가해야할까요ㅠ?
답글삭제$(elm).each(function (index) 의 index를 이용하시면 될것 같습니다.
삭제html 이 < nav id="nav">< a>1< /a>< a>2< /a>< a>3< /a>< a>4< /a>< a>5< /a>< a>5< /a>< a>7< /a>< /nav >
이라고 할때 화면 이동시에 휠을 위에서 아래로 할때 nextindex = index + 1;
아래에서 위로시엔 nextindex = index - 1; 로 처리한 후
animate complete 시에
$("#nav > a").eq(nextindex).addClass("active").siblings().removeClass("active");
이렇게 넣으시면 될듯하네요
저 혹시 어느부분에 어떻게 작성해서 추가해야할지 더 자시헤 여쭤봐도 될까요 ㅠ?
삭제https://jsfiddle.net/er1bt95s/
삭제감사합니다 ~~~ :)
삭제안녕하세요. 공개해주신 소스를 이용하여 원페이지 만들어보고 있습니다. 상단에 header가 있을 경우에 스크롤 내렸을때 첫번째 box 상단으로 이동하게 하고 싶어서 아래와 같이
답글삭제var header = '.header';
// 마우스휠을 위에서 아래로
if (delta < 0) {
if ($(elmSelecter).next() != undefined) {
try {
moveTop = $(elm).eq(0).offset().top;
moveTop = $(elmSelecter).next().offset().top;
} catch(e){}
}
// 마우스휠을 아래에서 위로
} else {
if ($(elmSelecter).prev() != undefined) {
try {
moveTop = $(header).offset().top;
moveTop = $(elmSelecter).prev().offset().top;
} catch(e){}
}
}
이렇게 추가하니 스크롤 내렸을때 1번째가 아닌 2번째 box로 바로 이동하는 문제와 하단 영역에서 스크롤 내렸을때 1번째 box로 이동하는 문제점이 생깁니다.
어떤 조건을 추가해야 할지요? ㅜㅜ
class 가 다르면 추가를 해주셔야 합니다. https://jsfiddle.net/yztrLhox/ 이런식으로요. 소스가 줄이시려면 element를 여러개 선택해서 if문으로 줄이시는 방법도 있습니다. https://jsfiddle.net/ag73nyrx/
삭제감사합니다. 알려주신 방법으로 적용하니 잘 작동됩니다~!
답글삭제하나만 더 여쭤봐도 될까요?
휠위치의 .box 기준으로 이동하는데 header 영역이 138px로 작아서 첫 화면에서 header 영역 이외에서 스크롤을 해도 이동할 수 있게 하려면 어떻게 하면 좋을까요?
header 의 css 의 position 을 fixed 또는 absolute 로 설정하셔서 위치를 맞추시는게 좋을듯하네요
삭제네~ 감사합니다~!
답글삭제익스플로러에서는 스크롤 내렸을때 위로 올라가는 현상이 나타나는데.. 혹시 왜그런지 아시나요 ㅠㅠ
답글삭제마우스 휠동작중에 추가로 움직임이 같이 들어가서 그러는것 같습니다. 화면 움직임이 동작할때 추가 동작을 받지 않게 수정하시면 될것같네요.
삭제window.onload = function () {
위에
var whellflag = false;
변수를 주고
처리되는
// 화면 이동 0.8초(800)
$("html,body").stop().animate({
scrollTop: moveTop + 'px'
}, {
duration: 800, complete: function () {
whellflag = false;
}
});
부분을
if (whellflag == false) {
whellflag = true;
// 화면 이동 0.8초(800)
$("html,body").stop().animate({
scrollTop: moveTop + 'px'
}, {
duration: 800, complete: function () {
whellflag = false;
}
});
}
이렇게 수정하시면 될듯합니다
안녕하세요 소스 보면서 연습중입니다 혹시 box1 box2까지만 100vh로 전체스크롤을 주고 box3부터 일반스크롤을 주고싶은데 내릴때는 잘 작동하는데 올라올때는 box1,box2에서 전체스크롤이 발생했다가 안했다가 하는거같은데 왜그러는지 알수있을까요ㅠㅠ
답글삭제코드를 보지 않아서 어떤증상인지 알수는 없지만 2번쨰 박스까지 휠이벤트를 주려면
삭제$(elm).each(function (index) {
아래에 15번째 줄에
if (index > 1) return;
를 추가하셔서 echo 를 통해 .box 전체에 돌리는 이벤트가 등록되지 않도록 하는것이 좋을듯하네요.
추가로 휠이벤트는 .box 의 마우스 위치에 따라서 작동하고 안하고 합니다. 화면 위치가 .box 2번인데 마우스 커서가 .box3번째위에 있으면 일반스크롤로 적용됩니다.
답변 너무 감드립니다!! .box1 .box2만 전체 스크롤을 주고 .box3는 일반스크롤로 내릴때는 잘 작동됩니다. 다만 아래서 위로 올라오는 스크롤시 .box2 에 마우스를 두고 스크롤을 위로 올릴시 .box1으로 바로 올라가버리는데 혹시 .box2 상단에서 걸리게 하려면 어떻게 해야하는지 혹시 아실까요
삭제조건을 추가해야 될것입니다. l6번째 줄에 지금 윈도우의 스크롤값과 박스의 최상단 위치를 확인하여 $(window).scrollTop() == $(this).offset().top 일치하면 올리고 더 아래라면 상단에 걸리도록 이요
삭제해결한거같아요! 감사합니다. 혹시 제이쿼리 다른부분에 대해서도 물어봐도 될까요?ㅠㅠ혼자 공부중인데 오류를 못찾겠습니다
삭제ㅎㅎ 다행이네요. 아는것에 한해서 답변드리겠습니다.
삭제섹션2 -> 섹션1로 갈때
답글삭제섹션1의 영역에 마우스커서를 대고 위로 올리면 작동하지 않는데(섹션1과 섹션2의 어중간한위치에 있는경우)
이런건 해결방안이 있을까요?
지금 소스는 div 자체에 이벤트를 준것이라 div에서 이벤트가 처리됩니다.
삭제어중간한 위치에서 휠 이벤트를 하시려면 scroll 이벤트에 scrollTop 의 위치
그리고 div 의 offset().top 위치를 확인해서 휠이벤트를 주어야합니다.
$(window).scroll(function(){
// scrollTop 위치
var scrollPosition = $(this).scrollTop();
});
var boxPosition = [];
$(elm).each(function (index) {
boxPosition.push($(this).offset().top);
});
먼저 유용한 소스를 공개하심에 감사의 말씀을 드립니다.
답글삭제위 소스를 토대로 실전에서 나름대로 네비게이션을 적용한 소스입니다.
< 예제페이지 >
http://siteware.kr/jquery/fullframe_wheel.php
< 설명 >
https://blog.naver.com/canbe76/222171931120
다른 사람이 쉽게 사용할 수 있는 소스 만드는 일이 나름 어렵네요.
건강하세요~~
안녕하세요! 우선 좋은 소스 공유해주셔서 감사합니다!
답글삭제위 소스대로 적용후 실행해보니 팝업 시 배경부분이 스크롤 되다 말아버리는 현상이 있어 답글에 알려주신
var melm = ".main_visual .fixbox";
$(melm).each(function (idx) {
// 개별적으로 Wheel 이벤트 적용
$(this).on("mousewheel DOMMouseScroll", function (e) {
e.preventDefault();
e.stopPropagation();
});
});
이 소스도 적용시켜보았습니다.
다만 문제는 팝업 내에도 다른 스크롤이 존재하는데 그 스크롤도 먹통이 되어버리네요 ㅠㅠ
팝업 또는 다른 스크롤이 존재할 시 풀페이지는 중단하고 해당 스크롤만 작동되게 하는 방법이 있을까요??
var me = ".modal"; 에보시면 modal클래스의 높이(height)를 기준으로 움직이게 되어있습니다.
삭제css에 padding 값을 줄경우 height값이 안맞을 수 있습니다.
팝업시 스크롤이 되거나 되지 않거나 하려면 전역 flag(true/false)를 두어 팝업시 flag를 변경하도록 하여 처리하는 방법이 있습니다.
팝업시 해당 tag를 숨겨놓는게 아니라 ajax로 불러올 경우 스크롤이 안되는 경우 tag로딩 후 스크립트를 실행해서 스크롤 동작하게 해야합니다.
선생님 정말 큰 도움 얻고 갑니다 감사합니다.
답글삭제정말 정말 감사합니다.
답글삭제이제 막 시작해보려는 초보에게 정말 큰 도움이 되었습니다.
복 받으실 거예요..
전체 화면이 스크롤하면 이동되는거 말고 첫번째 화면에서만 전체로 내려가고, 나머지 섹션들은 일반 스크롤로 하고싶은데, 댓글중에서 이런 방법을 설명해주신것을 보고 해보는데 잘 안돼서 댓글남깁니다 ㅠ 초보자라 그런데 더 쉽게 풀어서 설명해주실수 있나요 ㅠㅠ
답글삭제한번만 스크롤 하는건 해결했는데 제일 위 섹션에서 위로 스크롤을 하게되면 아래로 스크롤이 되는 이슈가 있는데 이게 해결이 안돼요 ㅠㅠ 댓글보고 하는데도 잘 안되네용
삭제이번에도 늦게 보았네요;;
삭제div에 mainbox 라는 클래스를 추가하고
<div class="box mainbox" style="background-color:red;">1</div>
글에서 14번째 라인의 .box 를 .mainbox 로 변경
var elm = ".mainbox";
하시면 될듯하네요.
그리고 맨위로 올라가는 이슈에 한해서는 52번째줄의
} catch (e) { }
이부분을
} catch (e) { moveTop = 0; }
으로 변경하심될듯하네요
아니면
삭제} catch (e) { moveTop = $(elmSelecter).first().offset().top; }
이런식으로 하셔도 되구요
좋은 소스 감사드립니다.
답글삭제안녕하세요 우선 훌륭한 소스 공개해주셔서 감사드립니다
답글삭제제가 해보고자하는 것은 pc화면에서는 마우스 휠이벤트가 작동하다가 반응형으로 모바일화면으로 갔을때
휠이벤트가 취소되고 평소 스크롤처럼 이용하고 싶은데 방법이 있을까요?
matchMedia 를 이용하면 될듯합니다.
삭제https://developer.mozilla.org/ko/docs/Web/API/Window/matchMedia
포폴용도로 fullpage js를 사용해보다 잘안돼서 우연히 들렸는데요, 너무 잘돼요 좋은 소스 감사합니다
답글삭제var $html = $("html");
답글삭제var page = 1;
var lastPage = $("section").length;
$html.animate({scrollTop:0},10);
$(window).on("wheel", function(e){
if($html.is(":animated")) return;
if(e.originalEvent.deltaY > 0){
if(page == lastPage) return;
page++;
}else if(e.originalEvent.deltaY < 0){
if(page == 1) return;
page--;
}
var posTop = (page-1) * $(window).height();
$html.animate({scrollTop : posTop});
});
안녕하세요,, 친절히 답변 주셔서 이렇게 글남깁니다 혹시 코드 봐주실 수 있나요? 다른 페이지 갔다가 뒤로가기하면 마우스휠이 한번에 먹히지 않습니다 그것도 제일 윗 섹션에서는 내려가는 게 잘 먹히는데 두번째 섹션부터 위로가는 휠이 먹이기 않아요ㅜㅜ
두번째 라인보시면 var page = 1; 으로 인하여 그렇습니다. 페이지 이동으로 다음 페이지로 넘어갔다가 다시 넘어오는 경우 다시 page = 1 로 초기화되서 동작이 늦춰지는 것입니다. ajax로 불러와서 처리하거나... localStorage나 세션 등으로 다시 넘어 올 경우 처리되도록 구성하셔야 될 듯하네요.
삭제var $html = $("html");
답글삭제var page = 1;
if (window.localStorage) {
if (localStorage.getItem("pageA.page") != undefined)
page = localStorage.getItem("pageA.page");
}
var lastPage = $("section").length;
$html.animate({ scrollTop: 0 }, 10);
$(window).on("wheel", function (e) {
if ($html.is(":animated")) return;
if (e.originalEvent.deltaY > 0) {
if (page == lastPage) return;
page++;
} else if (e.originalEvent.deltaY < 0) {
if (page == 1) return;
page--;
}
if (window.localStorage)
localStorage.setItem("pageA.page", page);
var posTop = (page - 1) * $(window).height();
$html.animate({ scrollTop: posTop });
});
와...... 진짜되네요 대박.... 감사합니다
삭제안녕하세용 코드 이거 코드 그대로 잘 쓰고 있는데 갑자기 홈페이지 처음 뜰때(홈페이지 로고를 눌려 메인페이지 첫섹션이나) 스크롤하면 제일 밑으로 가거나 아무튼 섹션 한개를 건너뜁니다,,, 혹시 봐주실 수 있나요?
삭제안녕하세요.. 정말 여기밖에 물어볼 곳이 없어서 질문드립니다..
답글삭제if (window.location.href == '주소')
{
$('클래스명').addClass('active');
};
이런식으로 해당 페이지에만 css를 줄 수 있는 코드를 찾아 style를 줬는데
문제는 다음페이지로 넘어가면 또 그 css가 없어지는 겁니다... 해당 페이지에 쪽수가 넘어가더라도 css가 그대로 유지될 수
있는 js코드가 없을까요?
js코드보다는 html 코드로 head 에 css 를 넣으시는게 좋을 것 같습니다.
삭제<head><style>.클래스명.active{ color:red;}</style></head>
특정페이지에서만 필요하다 그러면..
<head><style>.주소를구분할수있는클래스 .클래스명.active{ color:red;}</style></head>
<body class="주소를구분할수있는클래스">
그게 아니라면 ajax로 불러오는 코드내에 style 코드 출력되도록 넣든가요...
<style>.클래스명.active{ color:red;}</style>
주소를 구분할 수 있는 클래스는 뭐에요..? 제가 카페 24로 이용중인데(코딩은 vsc로) 쇼핑몰이라 상품 페이지가 몇백개가 넘어가서 해당 페이지 들어갔을때 어떤 쪽수의 페이지든 거기에 버튼을 활성화(css style) 시키고 싶거든요,, 일단 head에 style넣어서 하는건 안되네요 ㅎㅎㅎ 그래서 제가 위에 적은 코드와 let i=0; i<itemLength; i++ 이런코드를 합쳐서 하면 될 것 같긴한데 모르겠습니다 ,, 일단 답변주셔서 정말 감사합니다!
삭제카페24 기준으로 보면 상단의 meta 의 description 로 구분해야 될 것 같네요..
삭제console.log(document.querySelector('[name=description]').outerHTML.match(/content="(.*)"/)[1]);
아니면 keyword 로요
console.log(document.querySelector('[name=keyword]').outerHTML.match(/content="(.*)"/)[1]);
console.log(document.querySelector('[name=keywords]').outerHTML.match(/content="(.*)"/)[1]);
삭제안녕하세요 선생님,,,!
답글삭제제가 이 글을 7월달 쯔음에 우연히 발견하고 시험적용해 보았는데 너무 잘돼서 저장을 해놓았었습니다
감사합니다
그런데 오늘 다시 적용을 해보려고 하니
한 화면씩 스크롤도 안되며
빨강,주황,노랑 등의 색깔로 화면이 하나씩 꽉차게 나와야하는데
그냥 1cm정도 폭의 줄로 주루룩 나오네요
혹시 7월 이후에 글 일부분이 수정되었나요 ?
답변 주시면 정말정말 감사하겠습니다
천천히 답변 부탁드리겠습니다
따로 수정한 부분은 없으며 꽉차게 나오는 부분은 css 에서 처리되는것입니다.
삭제html,body{ margin:0; padding:0; width:100%; height:100%;}
.box{ width:100%; height:100%; position:relative; color:#ffffff; font-size:24pt;}
이부분이며
.box{ width:100%; height:100vh; position:relative; color:#ffffff; font-size:24pt;}
이런식으로 처리하기도 합니다.
var $html = $("html");
답글삭제var page = 1;
if (window.localStorage) {
if (localStorage.getItem("pageA.page") != undefined)
page = localStorage.getItem("pageA.page");
}
var lastPage = $("section").length;
$html.animate({ scrollTop: 0 }, 10);
$(window).on("wheel", function (e) {
if ($html.is(":animated")) return;
if (e.originalEvent.deltaY > 0) {
if (page == lastPage) return;
page++;
} else if (e.originalEvent.deltaY < 0) {
if (page == 1) return;
page--;
}
if (window.localStorage)
localStorage.setItem("pageA.page", page);
var posTop = (page - 1) * $(window).height();
$html.animate({ scrollTop: posTop });
});
님께서 짜주신 코드 잘 쓰고 있습니다 ! 근데 어느순간부터 오류가 나서 질문드립니다ㅜㅜ
홈페이지 처음 뜰때(홈페이지 로고를 눌려 메인페이지로 올때 첫섹션부분에서) 스크롤하면 제일 밑으로 가거나 아무튼 섹션 한개를 건너뜁니다,,, 또 한번씩 휠 자체가 안먹힐때가 있네요,, 혹시 봐주실 수 있나요?
소스 코드상 보면
삭제var lastPage = $("section").length;
섹션의 개수와
var posTop = (page - 1) * $(window).height();
이 부분이 이동시키는 부분을 개발자모드에서 console.log로 직어보시는것이 좋을듯하네요.
console.log("section:" + lastPage);
console.log("scrolltop:" + posTop );
블로그 관리자가 댓글을 삭제했습니다.
답글삭제작성자님 해결되었습니다. 감사합니다.(댓글 삭제가 안되어 답글로 남깁니다.)
삭제잘 해결되어서 다행이네요 제가 요즘 바쁘다보니 블로그 글을 확인을 잘못하네요^;;
삭제사랑합니다.
답글삭제코드 공유 감사드립니다. 소스 보면서 테스트하다가 궁금한 점이 있어 댓글 남깁니다! 현재 스크롤을 빠르게 계속 하다보면 버벅거리면서 내려가는데 스크롤을 여러번 하더라고 한 섹션 한 스크롤씩만 먹히게 하고 싶은데 변수를 줘서 true,false 로 줘봐도 잘 안되더라구요.. 어떻게 하면 좋을까요??
답글삭제작성자님 삭제가 안돼서 댓글로 남겨요 해결했습니다~
삭제어떻게 해결하셨나요
삭제저도 위에 분 말처럼 스크롤을 여러 번 하더라도 한 섹션 한 스크롤씩만 먹히게 하고 싶은데 어떻게 하면 좋을까요??
답글삭제작성글 삭제가 불가능하여 댓글로 남깁니다! 해결되었어요
삭제안녕하세요 푸터가 최하단 고정이 안되어서
답글삭제// 마우스휠을 위에서 아래로
if (delta < 0) {
if ($(elmSelecter).next() != undefined) {
try {
moveTop = $(elmSelecter).next().offset().top;
} catch (e) {}
} else ( $(elmSelecter).next() == undefined ) {
try {
moveTop = $("footer").offset().bottom;
} catch (e) {}
}
추가해주었습니다. 그런데 1페이지로 이동하면 푸터만큼 1페이지 공간이 안올라갑니다. 해결방법이 있을까요?
var elm = "header, footer, .box"; 이렇게 바꾸어도 안되나요?
삭제안녕하세요ㅠㅠㅠ저한테 지금 필요한 스크립트인데 에러가 있어서 여쭤보고픈게 있습니다 혹시 도움좀 주실수있으실까요ㅠㅠㅠㅠ?
답글삭제어떤 오류인지 확인가능할까요?
삭제안녕하세요. 좌우 스크롤 가능한 소스 찾고 있었는데 마침 딱 찾아서 적용해보려고 하는데요.
답글삭제위에 나와있는 소스로만 페이지에 넣어 만들면 기능상 문제가 없는데 위에 공통 헤더 부분 넣으려고 하니 작동을 안해서요...
카페24 쇼핑몰로 제작하는거라 공통 헤더 부분 레이아웃을 고정으로 넣으려고 합니다. 전문가가 아니라서 스크립트 복붙만 하던 사람이라... 도움 부탁드립니다ㅠㅠ
카페24에서 jquery를 사용하려면 $가 아니라 jQuery 로 처리해야될 것입니다.
답글삭제window.onload = function () {
var elm = ".box";
jQuery(elm).each(function (index) {
// 개별적으로 Wheel 이벤트 적용
jQuery(this).on("mousewheel DOMMouseScroll", function (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;
var moveTop = jQuery(window).scrollLeft();
var elmSelecter = jQuery(elm).eq(index);
// 마우스휠을 위에서 아래로
if (delta < 0) {
if (jQuery(elmSelecter).next() != undefined) {
try{
moveTop = jQuery(elmSelecter).next().offset().left;
}catch(e){}
}
// 마우스휠을 아래에서 위로
} else {
if (jQuery(elmSelecter).prev() != undefined) {
try{
moveTop = jQuery(elmSelecter).prev().offset().left;
}catch(e){}
}
}
// 화면 이동 0.8초(800)
jQuery("html,body").stop().animate({
scrollLeft: moveTop + 'px'
}, {
duration: 800, complete: function () {
}
});
});
});
}
이런식으로요
만약 스크립트 문제가 아니라면 var elm = ".box"; 의 box 를 다른 이름으로 바꾸시길 추천드립니다.
삭제예로 들면
script
var elm = ".box_container";
html
< div class="boxwrap">
< div class="box_container" style="background-color:red;">1
< div class="box_container" style="background-color:orange;">2
< div class="box_container" style="background-color:yellow;">3
< div class="box_container" style="background-color:green;">4
< div class="box_container" style="background-color:blue;">5
< div class="box_container" style="background-color:indigo;">6
< div class="box_container" style="background-color:violet;">7