IE11 브라우저 실행 문제
본문
안녕하세요.. 현재 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에서 지원을 안하기때문에
불가능하다고밖에 생각이 안드네요
감사합니다.. 호환되는 소스로 바꾸거나 IE, 사파리를 포기해야겠네요..
내년 굿바이
호환 안되는것이 많아졌습니다..
var top = elem.getBoundingClientRect().top;
var innerHeight = window.innerHeight;
return top > innerHeight + (triggerDiff || 0);
형태로 바꾸면 IE에서도 동작할거라 보입니다.
답글달아주셔서 감사합니다!
하지만 역시 브라우저가 너무 시대에 뒤쳐져서 그런가 안먹히네요..ㅠ
그래도 도움주셔서 정말 감사합니다!
답변을 작성하시기 전에 로그인 해주세요.
