강의/티스토리

티스토리 블로그 CCZ-CROSS 스킨 백그라운드 스크롤 금지하기

Woosh 2018. 11. 9. 14:30
반응형

문제해결



티스토리 블로그 CCZ-CROSS 스킨을 

쓰고 계시는 분에 한해서입니다.


또한 제 핸드폰은 아이폰6S ios12.0.1  

가장 최신버 전에서 테스트했을 때

개인적으로 불편한 문제가 있었기 때문에


이 부분을 수정했고

갤럭시S9, 아이폰5S, 아이폰6S, 

이름 모르는 LG 폰에서의 결과

모두 작동된 것으로 확인되었습니다.


일단 제가 불편했던 사항을 보겠습니다.



gif



확장 메뉴를 펼쳐놓고 밑으로 내리고 싶은데

백그라운드 스크롤(오른쪽 검정 부분) 

즉, 부모 창의 스크롤이 움직입니다.


백그라운드 스크롤이 다 내려간 후에

확장 메뉴 스크롤이 내려갑니다.

마찬가지로 백그라운드 스크롤이 다 올라간 후에

확장 메뉴 스크롤이 올라갑니다.


확인이 되시나요?

별거 아니라고 생각했지만

방문자 또는 사용자 입장에서는

굉장히 불편할 것으로 판단되었고

저 또한 너무 신경이 쓰였습니다.


그래서 저는 전문가가 아니기 때문에

여러 포탈을 검색을 했지만

해결할 방법이 없어서

이곳저곳 질문을 하고 다녔습니다.


며칠 동안 포기 상태로 있는데

코딩하시는 분이 답변을 주셨더라고요.

그래서 해결했습니다.


해결 짤 한번 보실까요?



gif



백그라운드 스크롤은 가만히 있고

확장 메뉴의 스크롤이 자연스럽고

내 마음대로 움직일 수 있도록 했습니다.


이 문제를 해결하기 위해서

몇날 며칠 신경쓰고 잠도 못잤습니다.


그래서 이 좋은 방법을 알려드리고자 합니다.



스킨편집



① 환경 설정으로 들어가서 스킨 편집을 누릅니다.



html 편집



② 오른쪽 상단에 html 편집을 누릅니다.



파일업로드



③ 파일 업로드를 누르시고 

images/reset.css 파일을 

마우스 오른쪽 버튼을 눌러 

'다른 이름으로 링크 저장' 합니다.


저장 받은 곳으로 오셔서

파일을 열어야 하는데 열리지 않을 겁니다.

파일을 오른쪽 버튼으로 누르고

연결 프로그램에서 메모장을 찾아서

열 수 있습니다.


메모장으로 파일을 여셨다면

아주 복잡한 영어와 특수문자가 보이실 텐데요.

무서워하지 마세요.


침착하게 따라오시면 됩니다.



찾기



④ ctrl + f를 누르셔서 찾기 창을 열어 줍니다.



찾기2



⑤ .fixed{overflow:hidden;} 

이것을 복붙해서 찾아줍니다.

그리고 삭제해줍니다.

backspace 누르면 한방에 없어집니다.


맨 앞에 쩜(.)도 있으니 주의하세요.



결론



⑥ .fixed{overflow:hidden;height:100%; position:fixed; top:0; width:100%;}

위에서 삭제한 자리에 이것을 똑같이 붙여 넣어줍니다.


그리고 저장 확인하시고 ③번이 있던 화면 밑에 보시면

추가라는 버튼이 있습니다 (제 사진엔 없습니다)

추가를 눌러서 다시 업로드해주시고

저장을 누르시면 수정됐음을 볼 수 있습니다.



반응형