이전 두 기사에서 CSS 설정 div 스크롤 막대 스타일 및 CSS3 사용자 정의 스크롤 막대 스타일의 예를 소개했습니다. 콘텐츠가 컨테이너를 초과하면 스크롤 막대가 컨테이너에 나타나는 것을 우리 모두 알고 있습니다. CSS를 사용하여 스크롤 막대 스타일을 제어하시겠습니까? 오늘은 자세하게 소개해드리겠습니다!
예:
/*作为IT界最前端的技术达人，页面上的每一个元素的样式我们都必须较真，就是滚动条我们也不会忽略。
下面我给大家分享一下如何通过CSS来控制滚动条的样式，代码如下：*/
/*定义滚动条轨道*/
#style-2::-webkit-scrollbar-track
{
background-color: #F5F5F5;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);
}
/*定义滚动条高宽及背景*/
#style-2::-webkit-scrollbar
{
width: 10px;
background-color: rgba(0, 0, 0, 0.34);
}
/*定义滚动条*/
#style-2::-webkit-scrollbar-thumb
{
background-color: #8b8b8b;
border-radius: 10px;
}
*단일 p에서 콘텐츠 스크롤을 달성하려면 세 가지 조건이 충족되어야 합니다.
1 p는 고정 높이로 설정되어야 하며 탄력적 값은 다음과 같습니다. 백분율 또는 자동은 사용할 수 없습니다.
2. 콘텐츠의 높이는 자체 높이를 초과해야 합니다.
3. 속성 "overflow:auto"를 추가해야 합니다.
*스크롤 막대 숨기기:
1. 가로 스크롤 막대 제거:
<body style="max-width:90%">
2. 세로 스크롤 막대 제거:
<body style="overflow-y:hidden">
3. 가로 및 세로 스크롤 막대 숨기기:
<body style="overflow-x:hidden;overflow-y:scroll">
4.
더 좋은 방법은 스크롤 막대의 색상을 완전히 투명하게 설정하여 스크롤 막대를 표시하지 않고도 콘텐츠를 스크롤할 수 있도록 하는 것입니다. 응용 프로그램: 가로 스크롤 막대 없음:<body style="overflow:hidden">或者<body scroll="no">
<p style="overflow-x:hidden">test</p>
<p style="overflow-y:hidden">test</p>
<p style="overflow-x:hidden;overflow-y:hidden" 或 style="overflow:hidden">test</p>
<p style="height:100px;width:100px;overflow:auto;">test</p>
,
위 내용은 CSS는 스크롤 막대 스타일의 구문 분석을 제어합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
