안드로이드에서는 제가 원하는 방식대로 팝업 내에서 스크롤이 생기고 잘 돌아가는데 아이폰에서는 스크롤이 제대로 작동하지 않는 현상이 있습니다.
워드프레스 게시판 KBoard 사용중입니다.
홈페이지는 www.haru.kr 입니다.
위 홈페이지에서 자유게시판을 누르시고 가장 처음 게시물인 (2번 페이지에 있습니다.) '테스트' 게시물을 누르면 전체 글이 보이지 않고 스크롤이 생기지 않습니다.
이때 아이프레임으로 보기 적용하지 않으면 스크롤이 생기나, 아이프레임이 아니기에 팝업에서 계속 튕깁니다.
어떻게 해야하나요 스크롤이 KBoard에 잘 적용되게 하려면요.
안녕하세요.
말씀하신 문제는 KBoard의 아이프레임으로 보기 기능과는 전혀 상관이 없습니다.
아이프레임으로 보기 기능은 게시판 height에 따라서 아이프레임의 height도 늘어나기 때문에 스크롤이 생기지 않습니다.
크롬 브라우저의 개발자 도구(F12키)로 확인해보니,
KBoard(게시판 혹은 아이프레임 영역)를 감싸고 있는 div에 다음과 같은 CSS 속성이 적용되어 있는 걸 확인했습니다.
.pum-container.pum-scrollable .pum-content {
overflow: auto;
overflow-y: scroll;
max-height: 95%;
}
overflow-y: scroll; 속성은 아이폰(ios)의 브라우저에서는 제대로 동작하지 않습니다.
즉 원하시는 대로 움직이지 않는 게 맞습니다.
이건 애플에서 그렇게 만들었기 때문에 어쩔 수 없습니다.
아이폰(ios)에서 스크롤을 적용하시려면 모멘텀 스크롤이라는 것을 사용하셔야 합니다.
-webkit-overflow-scrolling: touch; 이런 속성을 추가하시면 되는데요.
자세한 내용은 관련 자료를 링크해드리겠습니다.
https://blog.outsider.ne.kr/971
https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/
정리하자면
KBoard의 아이프레임으로 보기 기능은 아이폰(ios)에서도 아무 문제없이 동작하지만,
그것을 감싸고 있는 직접 만드신 테마 또는 레이어에 모멘텀 스크롤이 적용되지 않아서 스크롤이 제대로 움직이지 않는 겁니다.
모멘텀 스크롤을 적용하시면 원하시는 대로 스크롤이 움직일 겁니다.
고맙습니다.
*:focus{outline:none;}
#main-nav > ul > li > a {
font-size: 16px;
font-weight: bold;
}
@media only screen and (max-width:1000px) {
#main-nav > ul > li > a {
font-size: 18px;
font-weight: bold;
}
}
html.pum-open.pum-open-overlay, html.pum-open.pum-open-overlay.pum-open-fixed .pum-overlay {
overflow: hidden!important;
}
html.pum-open.pum-open-overlay, html.pum-open.pum-open-overlay.pum-open-fixed .pum-overlay {
overflow: hidden;
position: fixed;
width: 100%;
}
html.pum-open.pum-open-overlay.pum-open-scrollable .pum-overlay.pum-active {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
이미 사용자 정의 css에 이미 정의되어있는데 어떻게해야하나요?
게시판을 감싸고 있는건 .pum-container.pum-scrollable .pum-content 이쪽이기 때문에
다른곳에 속성이 있는건 아무 상관없을 것같군요.
속성을 추가해보세요.
.pum-container.pum-scrollable .pum-content {
overflow: auto;
overflow-y: scroll;
max-height: 95%;
-webkit-overflow-scrolling: touch;
}
그런데 실제로 직접 테스트 해가면서 적용해보셔야 합니다.
스레드본 선생님 정말 죄송한데
*:focus{outline:none;}
#main-nav > ul > li > a {
font-size: 16px;
font-weight: bold;
}
@media only screen and (max-width:1000px) {
#main-nav > ul > li > a {
font-size: 20px;
font-weight: bold;
}
}
// 안드로이드 / 아이폰 팝업 스크롤 방지
html.pum-open.pum-open-overlay, html.pum-open.pum-open-overlay.pum-open-fixed .pum-overlay {
overflow: hidden!important;
}
html.pum-open.pum-open-overlay, html.pum-open.pum-open-overlay.pum-open-fixed .pum-overlay {
overflow: hidden;
position: fixed;
width: 100%;
}
html.pum-open.pum-open-overlay.pum-open-scrollable .pum-overlay.pum-active {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
// 아이폰 팝업 스크롤 방지
.pum-container.pum-scrollable .pum-content {
overflow: auto;
overflow-y: scroll;
max-height: 95%;
-webkit-overflow-scrolling: touch;
}
라고 설정했는데 결국
이렇게 스크롤이 안되네요 ㅠㅠ 테스트해보면서 하고 있는데 모멘텀 스크롤이 왜 안되는지 모르겠습니다 ㅠㅠ
현재 특정 레이아웃 깨짐 방지, 아이프레임 보기를 활성화 해두었습니다.
저에게 큰 기대 하시면 실망하실 수도 있어요 ㅜㅜ
브라우저의 개발자 도구(F12키)로 확인해보세요.
캐시 비우고 확인해봐도 여전히 아래와 같이 적용되어 있군요.
.pum-container.pum-scrollable .pum-content {
overflow: auto;
overflow-y: scroll;
max-height: 95%;
}
http://www.haru.kr/wp-content/plugins/popup-maker/assets/css/site.min.css 이 파일입니다.
아무튼 KBoard에서 레이아웃 깨짐 방지, 아이프레임 보기 등 설정이랑 스크롤이랑은 전혀 상관없으니 설정은 기본값으로 두시는 게 좋습니다.
혹시나 설정 때문으로 오해해서 시간 허비하실까 봐 말씀드려요~ ㅎㅎ