스크롤 방향 판단 아이폰 테스트

스크롤 방향판단시 아이폰은 제대로 구동하지 않는다. 

문제해결을 위해 테스트 진행 

 

 

  // ios srollTop 테스트

  $('body').prepend('<div class="test">1111</div');

 

 

제이쿼리로 찍어보자 

$(function () {
  // 이전 scrolltop 처음만 초기화
  var prevSt = 0;

  // ios srollTop 테스트
  $('body').prepend('<div class="test">1111</div');

  $(window)
    .on('scroll', function () {
      toggleQuick();
    })
    .trigger('scroll');

  // 스크롤 방향판단 퀵메뉴 토글
  function toggleQuick() {
    var nextSt = $(this).scrollTop();

    $('.test').html(nextSt);

    // 아래로스크롤
    if (prevSt < nextSt) {
      $('#footer .quick').addClass('hide');
      // 0.8초 뒤에 보여주기
      setTimeout(function () {
        $('#footer .quick').removeClass('hide');
      }, 800);
    } else {
      $('#footer .quick').removeClass('hide');
    }
    // 콘솔확인 위쪽 순서변경 금지 preSt을 nectSt에 넣어야하기때문
    console.log(prevSt + '이전스크롤탑', nextSt + '나중스크롤탑');
    prevSt = nextSt;
  }
});

 

 

 

 

아이폰은 사파리에서 스크롤 발생시 내리면 음수 -로 나와 퀵메뉴가 버벅임 

 

    // ios 탄력 스크롤시 scrollTop이 음수후 0이 되므로 0보다 클때만 실행

    if (nextSt > 0)

 

아이폰때문에 if 조건문 하나 추가 

 

 

 

아이폰 해결! 

$(function () {
  // 이전 scrolltop 처음만 초기화
  var prevSt = 0;

  // ios srollTop 테스트
  $('body').prepend('<div class="test">1111</div');

  $(window)
    .on('scroll', function () {
      toggleQuick();
    })
    .trigger('scroll');

  // 스크롤 방향판단 퀵메뉴 토글
  function toggleQuick() {
    var nextSt = $(this).scrollTop();

    $('.test').html(nextSt);

    // ios 탄력 스크롤시 scrollTop이 음수후 0이 되므로 0보다 클때만 실행
    if (nextSt > 0)
      if (prevSt < nextSt) {
        // 아래로스크롤
        $('#footer .quick').addClass('hide');
        // 0.8초 뒤에 보여주기
        setTimeout(function () {
          $('#footer .quick').removeClass('hide');
        }, 800);
      } else {
        $('#footer .quick').removeClass('hide');
      }
    // 콘솔확인 위쪽 순서변경 금지 preSt을 nectSt에 넣어야하기때문
    console.log(prevSt + '이전스크롤탑', nextSt + '나중스크롤탑');
    prevSt = nextSt;
  }
});

*아이폰이 아니라서 모르게따..