CSS에서 div 스크롤 막대를 설정하는 방법

웹페이지와 모바일 애플리케이션이 발전하면서 스크롤 막대는 필수적인 사용자 경험이 되었으며, CSS3에서 제공하는 일련의 스크롤 막대 스타일 설정을 사용하면 스크롤 막대 스타일을 보다 유연하게 사용자 정의할 수 있습니다. CSS를 사용하여 div 스크롤 막대를 설정합니다.

1. 기본 설정

HTML에서 콘텐츠가 포함된 div를 정의하면 콘텐츠가 div의 크기를 초과하는 경우 스크롤 막대를 사용하여 볼 수 있습니다. 다음은 기본 HTML 구조입니다.

<div class="wrapper">
  <div class="content">
    <p>这里是一些内容</p>
    <p>这里也是一些内容</p>
    <p>这里还是一些内容</p>
  </div>
</div>

다음으로 div의 기본 스타일을 설정하겠습니다. 다음 스타일을 추가할 수 있습니다.

.wrapper {
    width: 300px;
    height: 200px;
    overflow: auto; /* 滚动条设置 */
    margin: 20px;
    border: 1px solid #ccc;
    padding: 10px;
}

.content {
    width: 100%;
    height: auto;
}

Overflow: auto 속성을 .wrapper로 설정하면 내용이 표시됩니다. 스크롤 막대가 숨겨져 있습니다. 크기가 div의 크기를 초과하면 스크롤 막대가 바깥쪽으로 확장되어 다른 요소를 덮지 않고 나타납니다.

2. 기본 스크롤 막대 설정

다음으로 다음과 같은 방법으로 스크롤 막대 스타일을 추가로 사용자 정의할 수 있습니다.

/* 滚动条整体样式 */
.wrapper::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    background-color: #f5f5f5;
}

/* 滚动条thumb(滑块)样式 */
.wrapper::-webkit-scrollbar-thumb {
    width: 5px;
    height: 10px;
    background-color: #9a9a9a;
}

/* 滚动条hover状态下thumb(滑块)样式 */
.wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/* 滚动条上下箭头样式 */
.wrapper::-webkit-scrollbar-button {
    background-color: #ccc;
    display: none;
}

/* 滚动条左右箭头样式 */
.wrapper::-webkit-scrollbar-button:start:decrement, .wrapper::-webkit-scrollbar-add-button {
    display: none;
}

.wrapper::-webkit-scrollbar-button:end:increment, .wrapper::-webkit-scrollbar-sub-button {
    display: none;
}

코드 분석:

1. ::-webkit-scrollbar : 모두 선택 스크롤바 구성요소. 이 스타일은 스크롤 막대의 전체 너비, 높이 및 배경색을 설정할 수 있습니다. ::-webkit-scrollbar ：选择所有滚动条部件。该样式可以设置滚动条整体的宽度高度和背景色。
2. ::-webkit-scrollbar-thumb ：选择滑块。该样式可以控制滑块的宽度高度和背景色。
3. ::-webkit-scrollbar-thumb:hover ：选择滑块在hover状态下的样式。
4. ::-webkit-scrollbar-button ：选择滚动条两端的箭头部分。该样式用于控制上下左右箭头的背景色和是否显示。
5. ::-webkit-scrollbar-button:start:decrement 或者 ::-webkit-scrollbar-sub-button ：选择滚动条上箭头(向上滚动)/左箭头(向左滚动)部分，当滚动条是垂直/水平方向时使用。
6. ::-webkit-scrollbar-button:end:increment 或者 ::-webkit-scrollbar-add-button ：选择滚动条下箭头(向下滚动)/右箭头(向右滚动)部分，当滚动条是垂直/水平方向时使用。

三、自定义滚动条

我们可以根据需要，自定义滚动条的样式，下面是一个自定义样式的例子：

.wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #f5f5f5;
}

.wrapper::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #f5f5f5;
}

.wrapper::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #a0a0a0;
}

.wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

.wrapper::-webkit-scrollbar-corner {
    background-color: #f5f5f5;
}

代码解析：

1. ::-webkit-scrollbar-track ：选择滚动条的 track 部分，是滑块和滚动箭头/滚动区域之间的区域，可以设置 track 的样式，如背景颜色、边框、圆角等，此例子中我们对其进行了圆角设置。
2. ::-webkit-scrollbar-thumb ：选择滑块的样式，此例子中我们对其进行了圆角设置，并设置了滑块的背景颜色以及hover状态下背景颜色。
3. ::-webkit-scrollbar-corner
::-webkit-scrollbar-thumb : 슬라이더를 선택하세요. 이 스타일은 슬라이더의 너비, 높이 및 배경색을 제어할 수 있습니다.

::-webkit-scrollbar-thumb:hover: 호버 상태의 슬라이더 스타일을 선택합니다.

::-webkit-scrollbar-button: 스크롤바 양쪽 끝에 있는 화살표 부분을 선택하세요. 이 스타일은 배경색과 위쪽, 아래쪽, 왼쪽 및 오른쪽 화살표 표시 여부를 제어하는 ​​데 사용됩니다.

위 내용은 CSS에서 div 스크롤 막대를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!