CSS3 사용자 정의 스크롤 막대 스타일을 구현하는 방법-CSS 튜토리얼-php.cn

CSS3 사용자 정의 스크롤 막대 스타일을 구현하는 방법

不言

풀어 주다： 2018-06-20 17:56:42

원래의

1764명이 탐색했습니다.

이 글은 주로 CSS3 사용자 정의 스크롤 막대 스타일의 샘플 코드를 소개합니다. 내용이 꽤 좋아서 지금 공유하고 참고하겠습니다.

스크롤 막대는 매우 흔한 일이지만 일부 브라우저와 함께 제공되는 스크롤 막대는 실제로 보기에 좋지 않습니다. 다음은 사용자 정의 스크롤 막대 구현에 대해 논의하기 위한 연구로 사용할 수 있습니다. 아름다워라. 하지만 웹킷 코어가 있는 브라우저에서만 플레이할 수 있기 때문에 재미로만 플레이할 수 있습니다!

오버플로 소개

정의: 오버플로 속성은 콘텐츠가 블록 수준 컨테이너를 오버플로할 때 콘텐츠를 클리핑하거나, 스크롤 막대를 렌더링하거나, 콘텐츠를 표시할지 여부를 지정합니다.

속성 값

overflow:visible    //默认值。内容不会被修剪，超出内容会显示在元素框之外
overflow:hidden     //内容会被修剪。超出内容被隐藏
overflow:scroll     //内容会被修剪，浏览器会显示滚动条以便查看其余内容
overflow:auto       //如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
overflow:inherit     //规定从该父元素继承overflow属性的值

로그인 후 복사

참고: Internet Explorer의 모든 버전(IE8 포함)은 속성 값 "상속"을 지원하지 않습니다.

오버플로가 기본값(표시) 이외의 값으로 설정되면 블록 수준 컨텍스트(플로트를 지우는 방법)가 생성됩니다. 자세한 내용은 BFC 및 마진 축소에 대한 심층 이해를 참조하세요.

작은 팁

현재 텍스트 줄의 초과 부분을 처리하려면 다음 속성을 사용할 수 있습니다. (동시에 요소의 너비 값과 Overflow:hidden; 및 white-space:nowrap;을 설정해야 합니다.)

text-overflow:clip       //修剪文本。
text-overflow:ellipsis   //显示省略符号来代表被修剪的文本。
text-overflow:string     //使用给定的字符串来代表被修剪的文本。

로그인 후 복사

여러 줄 텍스트의 경우 다음을 사용해야 합니다. 비표준 속성-webkit-line-clamp, 여기 자세히 설명하지 않습니다.

가로 및 세로 스크롤 막대

를 사용하여 가로 및 세로 스크롤 막대를 각각 설정합니다.

overflow-x 和 overflow-y

사용자 정의 스크롤 막대 구현

이 부분은 의사 클래스를 사용하여 스크롤 막대의 기본 스타일을 변경하는 브라우저용입니다.

스크롤 막대 구성 요소

1. :-webkit -scrollbar 스크롤 막대 전체 부분

2. ::-webkit-scrollbar-thumb 스크롤 막대 내부의 작은 사각형은 위아래(또는 왼쪽 또는 오른쪽)로 이동할 수 있습니다. ::-webkit-scrollbar -track 스크롤 바 트랙(Thumb이 안에 있음)

4. ::-webkit-scrollbar-button 스크롤 바 트랙의 양쪽 끝에 있는 버튼을 클릭하면 작은 사각형의 위치를 미세 조정할 수 있습니다. E5 .: -WEBKIT-SCROLLL-TRACK-PIECE 내부 궤도, 롤링 막대의 중간 부분
6 .: -WEBKIT-SCROLLLBAR-모서리 모서리, 즉 세로 스크롤 막대가 가로 스크롤 막대와 교차하는 위치
7 .::::::: : -Webkit-Resizer의 두 개의 롤링 바는 요소의 크기 조정을 드래그하는 데 사용됩니다.

<p class="box box7">
    <p>这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要， 用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也 会出现滚动条。 这个属性定义溢出元素内容区的内容会如何处理。如果值为
        scroll，不论是否需要， 用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也 会出现滚动条。
    </p>
</p>


.box8::-webkit-scrollbar {
    width: 12px;
    background-color: #eee;
}

.box8::-webkit-scrollbar-track {
    background-color: #eee;
}

.box8::-webkit-scrollbar-thumb {
    background: #3DB6A4;
}

.box8::-webkit-scrollbar-button:start {
    background: url(./imgs/up.png) no-repeat;
    background-size: 12px 12px;
}

.box8::-webkit-scrollbar-button:end {
    background: url(./imgs/down.png) no-repeat;
    background-size: 12px 12px;
}

로그인 후 복사

더 많은 효과는 아래와 같습니다.