[javascript] -webkit-scrollbar 사용 시 모바일에서 본문 우측에 여백이 생기는 문제

<style> 
	body.mobile::-webkit-scrollbar { display: none !important; }
	body.mobile { -ms-overflow-style: none; scrollbar-width: none; overflow-y: visible !important; } 
</style>
<script> 
var filter = "win16|win32|win64|mac|macintel"; 
if ( navigator.platform )
	if ( filter.indexOf( navigator.platform.toLowerCase() ) < 0 ) 
		document.body.classList.add("mobile");
</script>

제목의 문제가 발생하는 이유는 PC에서만 사용되는 body 태그의 스크롤바 영역이 모바일에서도 남아있기 때문이다.

그러므로 위 코드를 통해 현재 접속 상태가 모바일인지 확인하고, 스크롤바 영역을 지워버림으로써 간단히 해결할 수 있다.

위 코드를 붙여넣는 위치는 티스토리의 경우 skin.html의 </s_t3> 바로 위를 권장한다.

---

참고

• [jQuery] 모바일로 접속했는지 PC로 접속했는지 구분 방법 88240.tistory.com/393