본문 바로가기

블로그 관리/티스토리 팁

티스토리 사이드바 스크롤이 안 될때 해결 방법

티스토리 사이드바 스크롤이 안 될때 해결 방법

최근 몇일 동안 티스토리 사이드바 스크롤이 안되어서 틈틈히 'HTML/CSS 편집'을 들락날락 거려봤습니다. 도무지 모르겠어서 구글링을 이미 수십번 해봤지만 관련된 정보가 없어서 혼자 찾아야겠다 싶었습니다. 그 중 하나의 방법으로 다른 티스토리 블로그들의 사이드바 코드와 제 코드와 비교해봤습니다. 제가 혹시나 바꾼게 있나 해서요.

똑같았습니다.. 정말 토씨하나 안다르고 똑같아서요. 확실한건 제가 티스토리스킨에서 기본으로 코딩되어있는 부분을 임의로 수정한게 맞다는 겁니다. 아니면 갑자기 스크롤이 안될리가 없죠.. 스크롤바는 잘 나타나는데 말이죠. 심지어 저런 사이드바를 만드는 방법까지 연구해가며 찾아봤습니다. 

그래도 결국 오늘 해결했습니다. 제가 생각하던 문제와 전혀 다른 문제였습니다. 혹시나 저같은 상황을 겪고계신 분에게 도움이 되었으면 해서 포스팅 해봅니다.


그럼 티스토리 사이드바 스크롤이 안될 때 'HTML/CSS 편집'에서 확인해야 할 부분을 하나하나 알려드리겠습니다.

2017/11/15 - [기초] 티스토리 CSS 수정하기, 스킨 수정

우선 CSS탭에서 확인할 사항입니다.

#sidebar

position이 fixed가 맞는지 꼭 확인해야합니다. absolute로 되어있으면 사이드바가 본문과 별개로 스크롤이 되지 않습니다. 게다가 absolute로 바꾸면 모바일에서 사이드바를 확인하기 매우 어려워 집니다.


.mCSB_inside>.mCSB_container

사이드바 하위 객체로 아래 것들을 감싸주는 div 입니다. 스크롤을 관리하는 div이기도 합니다. csb로 검색하시면 편합니다. 이 부분은 기본적으로 margin-right:0 !important; 가 설정되어있습니다. 다른 옵션을 추가하지 않았는지 확인해보세요.

아래는 HTML 탭에서 확인해야할 사항입니다.

theme: "dark-thin",

윈도우 창이 960px 이상일 때 어둡고 얇은(?) 스크롤바를 자동으로 보여주는 함수 입니다. 저 부분이 위의 코드와 동일한지 확인해주세요.


이제 살짝 위를 봐주세요..

원인 js script

제 티스토리 사이드바 스크롤이 안되는 원인은 바로 저놈이었습니다. 심지어 jquery 최신버전(현재 3.2.1)을 사용중인데도 말입니다. 꼭 저 줄이 있어야합니다. 제가 jquery를 최신버전으로 변경하면서 저 코드를 지운게 원인이었습니다.

주의하실점은 다시 넣으실때 밑의 두 js 의 위에 넣으셔야 된다는 겁니다. 아래에 넣으시면 동작이 안됩니다. 3번째 줄이 스크롤바를 관리하는 js 파일인데 저 버전의 jquery를 사용하는 것 같습니다. 꼭 저 두 줄 위에 삽입해주세요!

저 위치에서 최신 코드로 대체해도 안됩니다. 저 버전에서 사용하는 코드가 있는듯 합니다.

이것 때문에 얼마나 삽질을 한 지 모르겠네요. 그래도 저처럼 jquery를 빼신분들도 계실거라 생각합니다. 이 글 보시고 빨리 해결하세요~!