이 글은 주로 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; }
CSS3의 @font 얼굴 규칙 분석 정보
마우스를 가리킬 때 CSS를 사용하여 마스크 레이어를 구현하는 방법
위 내용은 CSS3 사용자 정의 스크롤 막대 스타일을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!