티스토리 스킨에서 브라우저 스크롤바 두께변경하기

티스토리 Square스킨에서 브라우저 오른쪽 스크롤바 두께변경하기

모든 스킨에서 브라우저 스크롤바 두께 변경 

티스토리 스킨에서 브라우저 스크롤바 두께변경하기


티스토리 Square스킨에서 왼쪽 스크롤바 두께 변경하기는 아래를 클릭해 주세요.

https://www.springeye1.com/2023/11/626.html

티스토리 Square스킨에서 왼쪽 스크롤바 두께변경하기 넓이 변경

IT제품리뷰, 전자제품상식,컴퓨터지식정보,추천여행지,둘레길 탐방에 대한 이야기를 다루고 있어요.

www.springeye1.com





크롬이나 여러 브라우저에서 티스토리square스킨의 티스토리를 보면, 가장 오른쪽 스크롤바의 두께가 매우 얇아 밑으로 내려가려 할 때 마우스를 제대로 터치못하게 됩니다. 두께가 두꺼우면 마우스를 대충대도 움직일 수 있을 텐데 말이죠....


그럼 스크롤바 두께를 변경해 보겠습니다.

아래의 소스를  편집 - html의 <head>와</head>사이에 삽입하면 됩니다.


<!--스크롤바 시작--> <style>  /* width */  ::-webkit-scrollbar {  width: 12px;  }
 /* Track */  ::-webkit-scrollbar-track {  box-shadow: inset 0 0 2px grey;   border-radius: 10px;  }
 /* Handle */  ::-webkit-scrollbar-thumb {  background: #4C4C4C;   border-radius: 0;  } </style>


<!--스크롤바 끝-->


width : 스크롤바의 너비


box-shadow : track의 그림자를 변경


border-radius : track의 위, 아래 끝 부분을 동그랗게 설정.

(0~10으로 변경가능하며, 값이 10에 가까울 수록 동그랗게 변경됩니다.)

background : 스크롤 바의 컬러

border-radius : handle의 위, 아래 끝 부분을 동그랗게 설정.

(0~10으로 변경가능하며, 값이 10에 가까울 수록 동그랗게 변경됩니다.)


위의 소스는 타 블로그에서 얻어낸 소스인데 오래되어 출처를 모르겠네요.


튀는 EYE의 Blog

일반적이 아닌 튀는 시각으로 바라보며~

댓글 쓰기

아무 의미없는 댓글은 삼가해 주세요. 짧더라도 정성스럽게 달아주세요. 보완할 거 있다면, 최대한 보완할게요~감사합니다.

다음 이전