CSS3 사용자 정의 스크롤 막대 스타일의 자세한 예

이전 기사에서 div 스크롤 막대 스타일을 설정하는 CSS를 소개했습니다. 컨텐츠가 컨테이너를 초과하면 자체 스크롤 막대가 컨테이너에 나타날 수 있습니다. 미적 요구 사항이 충족되면 css 의사 클래스를 통해 스크롤 막대를 맞춤 설정할 수 있습니다.

먼저 스크롤바를 이해해야 합니다. 스크롤 막대는 외관상 두 부분으로 구성됩니다. 1. 슬라이딩 부분, 우리는 이를 슬라이더라고 부릅니다. 2. 스크롤 막대의 트랙, 즉 슬라이더의 트랙. 트랙의 색상보다 어둡습니다.

스크롤 막대의 CSS 스타일은 주로 세 부분으로 구성됩니다:

　1. ::-webkit-scrollbar 스크롤 막대의 전체 스타일을 정의합니다.

2. ::-webkit-scrollbar-thumb 슬라이더 부분;

3. ::-webkit-scrollbar-thumb 트랙 부분

다음은 overflow-y:auto;를 예로 들었습니다. (overflow-x:auto도 동일합니다.)

html 코드:

<p class="test test-1">
		<p class="scrollbar"></p>
</p>

css 코드:

    .test{
    	width: 50px;
    	height: 200px;
    	overflow: auto;
    	float: left;
    	margin: 5px;
    	border: none;
    }
    .scrollbar{
    	width: 30px;
    	height: 300px;
    	margin: 0 auto;

    }
    .test-1::-webkit-scrollbar {/*滚动条整体样式*/
            width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }
    .test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 10px;
             -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: #535353;
        }
    .test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 10px;
            background: #EDEDED;
        }

　 효과는 다음과 같습니다:

스크롤 막대의 너비를 변경하려면: 스크롤 막대의 둥근 모서리를 변경하려면 ::-webkit-scrollbar에서 변경하세요. 슬라이더를 ::-webkit-scrollbar-thumb에서 변경하세요. 트랙의 둥근 모서리를 변경하려면 ::-webkit-scrollbar-track에서 변경하세요.

또한 스크롤 막대의 슬라이더를 사용할 수도 있습니다. 색상뿐만 아니라 이미지도 다음과 같이 채워집니다:

css code:

    .test-5::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    .test-5::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 10px;
    background-color: #F90;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, 
    rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
        }
    .test-5::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            /*border-radius: 10px;*/
            background: #EDEDED;
        }

html code:

	<p class="test test-5">
		<p class="scrollbar"></p>
	</p>

효과는 다음과 같습니다:

요약:

나는 그것을 통해 그것을 믿습니다. 위의 예에서는 친구가 자신만의 스크롤 막대를 만들 수 있습니다. 문서에 여러 개의 스크롤 막대가 있고 모든 스크롤 막대 스타일이 동일하기를 바라면 클래스, ID, 라벨 이름과 같은 항목을 추가할 필요가 없습니다. 등을 의사 요소 앞에 배치합니다.

관련 권장 사항:

CSS 설정 div 스크롤 막대 스타일의 예

스크롤 막대 스타일 문제를 해결하는 방법

div 스크롤 정보 in html 바 스타일 디자인의 예

위 내용은 CSS3 사용자 정의 스크롤 막대 스타일의 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!