[fullpage.js] fullpage.js 사용으로 인해, 모바일에서 메뉴 스크롤 안될 때

안녕하세요.

여러 검색을 통해 이렇게 방문해 주셔서 감사합니다 : ) 

원하시는 해결방법을 얻어가셨으면 좋겠네요!

 

fullpage.js 를 사용해본적 있으신가요?

저는 퍼블리싱하면서 처음 사용해 봤는데, 어렵더라구요. ㅠㅠ

 

그나마 구글검색 했을 때 fullpage.js 의 기능들을 설명해주는 블로거 분들도 꽤 있어서 도움을 많이 받았는데요,

한가지 해결 못하던 일이 있었습니다.

 

바로 모바일에서 fullpage를 사용한 화면에서 전체메뉴 보기 스크롤이 안된다는 점 이었는데요. 말로 쉽게 설명하기가 어려워서 간단한 그림을 첨부합니다.

 

.

여기 평범한 모바일 버전인 홈페이지가 있습니다. ( 있다고 해주세요.. ㅎㅎ )

보통 전체메뉴 같은 경우에는 header 의 우측 부분에 아이콘모양으로 배치되어 있습니다.

 

.

이 아이콘을 클릭 할게 되면 전체메뉴를 확인 할 수 있습니다.

 

.

아래 화면과 같이 모든 메뉴를 확인할 수 있는 창을 나오도록 하는데, 보통 스크롤과 함께 생기게 됩니다.

문제는 fullpage.js 를 사용한 화면에서의 전체메뉴 화면이 스크롤이 작동하지 않는다는 점 입니다. ㅠㅠ

크롬 브라우저로 모바일 화면에서는 잘 작동하던데..  원인을 모르겠더라구요 ㅠ

 

 

 

한참 검색하다가 해결방안을 찾았습니다. !

 

바로 fullpage 의 setAllowScrolling 기능을 활용하는 방법입니다.

setAllowScrolling 이 기능은 fullpage의 스크롤링 기능을 재생/정지 시키는 기능인데요,

전체메뉴를 호출할 때는 홈페이지 화면을 다 가리니 fullpage 기능을 잠시 멈추고, 전체메뉴가 없어질 때 다시 기능을 사용하도록 하면 문제는 해결되더라구요.!!

 

 

// 전체메뉴 아이콘을 클릭 했을 때

$('전체메뉴아이콘 class명').click(function(){
  $.fn.fullpage.setAllowScrolling(false);
});

 

// 메뉴명을 클릭하거나, 전체화면을 다시 끄거나
$('메뉴명 class명').click(function(){
  $.fn.fullpage.setAllowScrolling(true);
});

 

 

뭐 이게 정답인지는 모르겠지만, 해결을 했으니,,,

그걸로 잇츠 오케이?! ㅎㅎ : )

 

참고사이트 : https://codepen.io/alvarotrigo/pen/EjeNdq

setAllowScrolling - fullpage.js

 

- 도움이 되는 정보였길 바랍니다! 감사합니다 : )