서론
스크롤 하면서 url바가 노출되고 히든 될때마다 의도하지 않은 resize가 발생하고 그렇다고 resize를 막자니 막상 resize를 해야 되는 경우가 생기게 되었다.
컨텐츠를 position:fixed나 overflow:hidden등 스크롤에 막아 버리고 touch를 사용하여 직접 스크롤을 제어하려고 하였다.
이슈확인
ios의 경우 스크롤을 막아도 fake 용으로 scroll되는 구간을 만들어 -webkit-overflow-scrolling:touch를 하면 문제 없이 되었지만 안드로이드의 경우 스크롤 자체가 되지 않았다.
그래서 안드로이드는 touchmove로 스크롤 값을 직접 주니 정상 작동 되었다.
하지만 스크롤이 아닌 touch를 하는것이기 때문에 역스크롤을 하려고 하면 친절하게 계속 새로고침이 되었다.
본론
검색을 해보니 첨보는 속성이 있었다.
아마 이 이슈를 첨으로 이슈라고 생각해서 이제야 발견한 거일수도 있다.
body {overscroll-behavior : contain;}body에다 넣어주면 자동새로고침이 되지 않는다.
이 속성은 overscroll 답게 x,y가 다 있으므로 따로 줄수도 있다.
body {overscroll-behavior-y : contain;}y값은 기존 스크롤 할때 쓰이며 좋겠지만 x의 값은 좌우 스와이프, 슬라이드, 캐러셀에 쓰면 좋을거 같다.
PUBGYU