스크롤 위 한장씩 레이어 생김

스크롤 위 한장씩 레이어 생김

QA

스크롤 위 한장씩 레이어 생김

본문

오랜만에 들렸습니다.  자바스크립트 문의좀 드릴수 있을까요 ?

스크롤 위 한장씩 레이어 생김 스크롤 내림 한장씩 레이어 사라짐 스크립트 입니다.

크롬에서 너무 잘되는데 ...  익스에서 예외처리 되네요 ㅠㅠ 해결방법 아시는 분 도움좀 주세요

 

<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

답변을 작성하시기 전에 로그인 해주세요.
전체 946
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT