001. [이슈] 2번 문제에서 넘어가지 않는 사항

2번 문제에서 다음 버튼을 눌러도 넘어가지 않는 사항이 발견되었습니다. 확인된 기기는 아래와 같습니다.

안드로이드 Facebook 브라우저

안드로이드 크롬 브라우저

데스크톱 크롬 확대 110%(100%나 120%는 작동합니다.)

해결과정

각 브라우저 별 테스트 진행

아래 하드코딩으로 각 브라우저에서 2번 문제로 넘어가는지 확인(scrollUp, scrollDown을 크롬 개발자도구 중 콘솔창을 열어 직접 입력)

2번이 작동하지 않아 animate를 직접 호출 → 동작 확인


$('html, body').animate({scrollTop: (1000)}, 500);
$('html, body').animate({scrollTop: (2000)}, 500);
$('html, body').animate({scrollTop: (3000)}, 500);

기존 코드 변경(https://mbit.weniv.co.kr/static/js/form.js)


function scrollUp(top) {
    const vheight = $('.test').height();
    const margin_top = parseInt($('#survey').css('margin-top'), 10);
    $('html, body').animate({
        scrollTop: top - vheight - margin_top
    }, 500);
};

function scrollDown(top) {
    const vheight = $('.test').height();
    const margin_top = parseInt($('#survey').css('margin-top'), 10);
    $('html, body').animate({
        scrollTop: vheight + top - margin_top
    }, 500);
}

$('.next_btn').click(function(e){
    let divs = $(this).parent().prev().children();
    let present_top = $(this).parent().parent()[0].offsetTop;
    let inputs = divs.find('input:checked');
    if(inputs.length < 1) {
        alert('문항이 선택되지 않았습니다.');
        return false;
    }
    e.preventDefault();
    scrollDown(present_top);
});

$('.prev_btn').click(function(e){
    let present_top = $(this).parent().parent()[0].offsetTop;
    e.preventDefault();
    scrollUp(present_top);
});