오늘의 미친 짓, 스크롤바를 상단 배너의 높이와 같이 한다.

오늘의 미친 짓, 스크롤바를 상단 배너의 높이와 같이 한다.


얼마전에 "묘한오빠 블로그는 Internet Explorer에 대한 지원을 종료합니다."라는 글을 올린 적이 있었습니다.

그래서 최근 보이지 않는 곳에서 이것저것 스킨을 수정하며 적용하는 방법에 대한 고민을 하고 있던중...,


왜?  아직까지 브라우져별로 스크롤바에 대한 변경이 자유롭지 못할까? 하는 생각을 하게 되었습니다.


지랄맞은 IE, Edge의 경우,  

나름 브라우져가 Ative 상태인 경우 스크롤바가 나왔다 다른 창을 선택하게 되면 스크롤바가 사라지는 기능을 제공합니다.


그래서 -webkit- 계열의 브라우져인 크롬웨일 브라우져에서 지금 블로그와 잘 어울리는 스크롤바를 아래와 같이 수정합니다.



html 

{ overflow: scroll; overflow-x: hidden; -ms-overflow-style: -ms-autohiding-scrollbar; }

body::-webkit-scrollbar 

{ width: 10px; height: 0px; display:block; }

body::-webkit-scrollbar:window-inactive 

{ width: 10px; height: 0px; display:none; }

body::-webkit-scrollbar-button:start:decrement, 

body::-webkit-scrollbar-button:end:increment 

{ width: 0px; height: 0px; background: url() rgba(255, 255, 255, 0); }

body::-webkit-scrollbar-track 

{ background: rgba(255, 255, 255, 0.1); -webkit-box-shadow: inset 1px 0px 6px rgba(0,0,0,0.5); }

body::-webkit-scrollbar-track-piece 

{ background: rgba(255, 255, 255, 0.01); }

body::-webkit-scrollbar-thumb 

{ height: 396px !important; background: rgba(4, 135, 84, 1); -webkit-box-shadow: inset 1px 0px 6px rgba(0,0,0,1); }

body#tt-body-page::-webkit-scrollbar-thumb 

{ height: 407px !important; background: rgba(4, 135, 84, 1); -webkit-box-shadow: inset 1px 0px 6px rgba(0,0,0,1); }

body::-webkit-scrollbar-corner 

{ background: rgba(255, 255, 255, 0); } 



보시면 아시겠지만, 많이 조악합니다

그래도 묘한오빠 블로그에 가장 잘 어울리도록 스크롤바를 수정해봤습니다. ^;


앞으로 Scrollbar에 대한 수정이 좀 더 용이했으면 좋겠다는 생각입니다.


웨일 브라우져에서는 모바일처럼 전체화면에 대한 스크롤바를 오버레이 방식으로 조정하는 옵션이 있는데..., 기본적으로 브라우져마다 지원해줬으면 하는 생각도 듭니다. (크롬, 웨일, 오페라 PC버전, 잘 나오네요 ^;)



묘한오빠

남자의 호칭 중에 "오빠"처럼 묘한 것도 없었다

이미지 맵

묘한오빠/블로그가 변한다 다른 글

이 글에 담긴 의견 12

*

*

    • 미친짓이라 쓰고 아름다운 변화라 읽으면 되는건가요? ^^

    • 정말 탕비에 드린 공을 생각하면 아까워서 버리지를 못하겠네요 ㅋㅋ
      우리 마샬동생이 탕비 카피본을 하나 만들어주면 좋을긴데.., 섬머나잇 최종본에 한번 도전해 봐야겠습니다 ^^

    • 안그래도 묘한오빠님 스크롤바가 아예 없어서 좀 불편했는데^^; 이렇게 큰 스크롤바가 생겼네요
      돌아보면 왠지 저는 스크롤바를 자주 이용하더라구요ㅋ
      원하는 대로 꾸밀수 있으면 참 좋을 것 같습니다. 마소는 익스,엣지에다 뭘하는지...참.

    • 더 큰 스크롤바를 원하시는 것 같은데요. ㅋㅋ
      이 사이즈가 제일 보기가 좋더라구요 ^^;

이전 글

다음 글

티스토리 툴바