스크롤 위 한장씩 레이어 생김
본문
오랜만에 들렸습니다. 자바스크립트 문의좀 드릴수 있을까요 ?
스크롤 위 한장씩 레이어 생김 스크롤 내림 한장씩 레이어 사라짐 스크립트 입니다.
크롬에서 너무 잘되는데 ... 익스에서 예외처리 되네요 ㅠㅠ 해결방법 아시는 분 도움좀 주세요
<div class="puzzles">
<ul>
<li class="li1 puzzles_ani">
<div class="links">
<a href="" class="links_right1 p1" style="top:0px;">
<span>12월 오픈예정</span>
</a>
</div>
</li>
<li class="li2 puzzles_ani">
<div class="links">
<a href="event.php" class="links_right2 p2">
<span>이벤트</span>
</a>
<a href="" class="links_right1 p3">
<span>시그니처 영상</span>
</a>
</div>
</li>
<li class="li3 puzzles_ani">
<div class="links">
<a href="https://xi.co.kr/member/login?returnUrl=http://pangyo-xi.co.kr/web/pangyo-xi07-1104-3.pdf" target="_blank" class="links_right3 p4">
<span>1111</span>
</a>
<a href="brand.php" class="links_right2 p5">
<span>2222</span>
</a>
<a href="premium.php" class="links_right1 p6">
<span>3333</span>
</a>
</div>
</li>
<li class="li4 puzzles_ani">
<div class="links links4">
<a href="qna.php" class="links_right1 p7">
<span>4444</span>
</a>
<a href="news.php" class="links_right3 p8">
<span>5555</span>
</a>
<a href="#" onclick="window.open('https://www.xi.co.kr/member/login_pop?aptseq=323', 'interest', 'width=800, height=730, scrollbars=yes, toolbar=no, menubar=no');return false;" class="links_right2 p9">
<span>6666</span>
</a>
<a href="contact.php" class="links_right4 p10">
<span>7777</span>
</a>
</div>
</li>
</ul>
</div>
<!-- <script>
var scroll_count = 0;
$("html, body").on('mousewheel DOMMouseScroll',function(e){
var wheel = e.originalEvent.wheelDelta;
console.log(wheel);
if(wheel >= 0) {
scroll_count = ++scroll_count < 9;
//스크롤 올릴때
$(".li1").removeClass("puzzles_ani");
} else if (wheel <= 120) {
scroll_count = --scroll_count > -9;
//스크롤 내릴때
$(".li1").addClass("puzzles_ani");
}
console.log(scroll_count);
});
</script> -->
<!-- <script>
$("html, body").on('mousewheel DOMMouseScroll',function(e){
var wheel = e.originalEvent.wheelDelta;
console.log(wheel);
if(wheel >= 0){
//스크롤 올릴때
$(".li1").removeClass("puzzles_ani");
} else if (wheel <= 120) {
//스크롤 내릴때
$(".li1").addClass("puzzles_ani");
}
});
</script> -->
<!-- <script>
var scroll_count = 0;
$("html, body").on('mousewheel DOMMouseScroll', function(e) {
// html, body 에 마우스 휠 이벤트와 돔마우스스크롤 이벤트를 걸었습니다.
var E = e.originalEvent;
// 변수 E 에다가는 이벤트 객체의 속성으로 사용할 수 있는 속성 인 originalEvent 를 넣었습니다.
scroll_count = ++scroll_count;
console.log(scroll_count);
// 변수 delta 에다가는 숫자 자료형 0 을 넣어 두었습니다.
if (E.scroll_count) {
// 이 조건에서는 e.originalEvent 의 속성으로 detail 가 있다면 입니다.
// 익스, 크롬 등은 e.originalEvent 에 detail 의 속성이 없으나,
// 파이어 폭스 일 경우엔 detail 속성이 있습니다.
// 그래서 이 조건을 실행 시킵니다.
// 이렇게 해주는 이유는 detail 의 값이 익스와 크롬과는 다르게 3 이 찍힙니다.
// 익스, 크롬은 120 이 찍히죠.
// 익스, 크롬과 동일하게 해주기 위해서 이렇게 해줍니다.
}else{
// 이곳에서는 익스, 크롬의 e.originalEvent 의 속성으로 wheelDelta 를 사용할 수 있습니다.
delta = E.wheelDelta;
part1 = $(".li1");
part2 = $(".li2");
part3 = $(".li3");
part4 = $(".li4");
if(scroll_count >= 2 && scroll_count < 4){
part1.addClass("puzzles_ani");
}else if(scroll_count >= 4 && scroll_count < 6){
part2.addClass("puzzles_ani");
}else if(scroll_count >= 6 && scroll_count < 8){
part3.addClass("puzzles_ani");
}else if(scroll_count >= 8 && scroll_count < 10){
part4.addClass("puzzles_ani");
}else{
}
};
});
</script> -->
답변 1
DOMMouseScroll는 IE에서 지원안해서 생기는 문제인것 같습니다.
wheel 이벤트를 사용해보세요
https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event
https://stackoverflow.com/questions/25204282/mousewheel-wheel-and-dommousescroll-in-javascript