IE11 브라우저 실행 문제

IE11 브라우저 실행 문제

QA

IE11 브라우저 실행 문제

답변 3

본문

안녕하세요.. 현재 http://minho.dothome.co.kr/nlobby_home/ 홈페이지 작업중인데

크롬, 파이어폭스, 엣지에서는 잘 돌아가지만..

익스나 사파리에서는 스크립트가 문제가 있는지 무한 로딩이 뜨더군요..

소스를 쭉 파악해봤는데 46번째 줄 메뉴 관련스크립트더군요

var {}형식으로 선언되어서 그런가 익스에서는 오류문법으로 인식해서

{}를 제거를 하니까 문법 문제라고 발생하더군요.. 하..

 

해결이 안되면 다른 네비게이션 슬라이드 롤링 스크립트를 대체해야될 것 같은데...

저 문법을 해결할 방법이 있을까요?.. 고수님들 답변 부탁드립니다..

 


    $(window).load(function(){
        $("#loading").fadeOut();
    });
    $(document).ready(function(){
        $('div.scroll_img a').click(function(){
            $('html, body').animate({
                scrollTop: $( $(this).attr('href') ).offset().top -100}, 1000);
                return false;
        }); 
        function move_gnd(){
            $('div.scroll_img a').animate({ 'top' : '0px' }, 1200)
            $('div.scroll_img a').animate({ 'top' : '10px' }, 1200, null, move_gnd )}
            move_gnd();
            var scrollUpDelay = 1;
            var scrollUpSpeed = 30;
            function scrollUp(){
                if(document.body.scrollTop<1){
                    return;
                }
                document.body.scrollTop=document.body.scrollTop-scrollUpSpeed;
                setTimeout('scrollUp()',scrollUpDelay);
            }
            $(window).scroll(function() {
                if($(document).scrollTop() > 300) {
                    $('#top_btn').fadeIn();
            } else {
                $('#top_btn').fadeOut();
            };
        });

        $("#top_btn").on("click", function() {
            $("html, body").animate({scrollTop:0}, 1000);
            return false;
        });
        function isElementUnderBottom(elem, triggerDiff) {
            var { top } = elem.getBoundingClientRect();
            var { innerHeight } = window;
            return top > innerHeight + (triggerDiff || 0);
        }
        function handleScroll() {
            var elems = document.querySelectorAll('.fade-in');
                elems.forEach(elem => {
                if (isElementUnderBottom(elem, -20)) {
                    elem.style.opacity = "0";
                    elem.style.transform = 'translateY(70px)';
                } else {
                    elem.style.opacity = "1";
                    elem.style.transform = 'translateY(0px)';
                }
            })
        }
        window.addEventListener('scroll', handleScroll);
        var header = $("#header");
        var windowWidth = $(window).width();
        $(".btn-gnb-open").on("click",function () {
            m_gnb_open ();
        });
        $(".btn-gnb-close").on("click",function () {
            m_gnb_close ();
        });

        $(".depth1 > li").on("mouseover", function () {
            depth2_open(this);
        });
        $(".navBox").mouseleave(function () {
            depth2_close(this);
        });

        $(".depth1 li > a").on("click",function () {
            m_depth2_open(this);
        });
        m_mode();

        $(window).resize(function () {
            if($(window).width() >= 1040 && $("#header").hasClass("m-gnb-open")) {
                m_gnb_close();
            }
            m_mode()
            if (windowWidth >= 1040) {
                $(".navBox").on("mouseleave", function () {
                    depth2_close(this);
                });
            }
        });

        function m_gnb_open() {
            windowHeight = $(window).height();
            winWidth = $(window).width();
            $("#header").addClass("m-gnb-open");
            $("body").addClass("openGnb-mode");
            $(".navi").append("<div class='gnb-bg' />");
            $(".gnb-bg").css({'width':winWidth,'height':windowHeight});
            $(window).resize(function () {
                m_mode();
                windowHeight = $(window).height();
                winWidth = $(window).width();
                $(".gnb-bg").css({'width':winWidth,'height':windowHeight}); 
            });
        }
        function m_gnb_close() {
            $("body").removeClass("openGnb-mode");
            $("#header").removeClass("m-gnb-open");
            m_depth2_close();
            $(".gnb-bg").remove(); 
            $(window).resize(function () {
                $(".gnb-bg").removeAttr("style");
            });
        }
        function m_depth2_open (el) {
            if($("#header").hasClass("m-gnb-open")) {
                if (!$(el).parent("li").hasClass("on")) {
                    $(el).parent("li").addClass("on").siblings("li").removeClass("on");
                    $(el).parent("li").siblings("li").children(".depth2").slideUp(200);
                    $(el).siblings(".depth2").slideDown(200);
                } else {
                    $(el).parent("li").removeClass("on");
                    $(el).siblings(".depth2").slideUp(200);
                }
            }
        }
        function m_depth2_close () {
            $(".depth1 li").removeClass("on");
            $(".depth2").slideUp(200).removeAttr("style");
        }
        function depth2_open (el) {
            if(!$("#header").hasClass("m-gnb-open")) {
                $(el).closest("#header").addClass("gnb-open");
            }
        }
        function depth2_close (el) {
            $(el).closest("#header").removeClass("gnb-open");
        }
        function m_mode(){
            var windowWidth = $(window).width();
            var body = $("body");
            if (windowWidth <= 1040) {
                body.addClass("m-mode")
            } else if (windowWidth > 1040) {
                body.removeClass("m-mode")
            }
        }
    });

이 질문에 댓글 쓰기 :

답변 3

처음보는 선언형태인데

느낌상으론 전역변수로 바꿔주는 그런 기능인가보군요

현재 제 시점에선 처음보는 기술이 IE에서 지원을 안하기때문에

불가능하다고밖에 생각이 안드네요

var top = elem.getBoundingClientRect().top;
var innerHeight = window.innerHeight;
return top > innerHeight + (triggerDiff || 0);

 

형태로 바꾸면 IE에서도 동작할거라 보입니다.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
filter #ie ×
전체 31
© SIRSOFT
현재 페이지 제일 처음으로