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

🎜::-webkit-scrollbar-button:start:decrement 또는 ::-webkit-scrollbar-sub-button: 스크롤 막대에서 화살표를 선택합니다(위로 스크롤 )/ 왼쪽 화살표(왼쪽으로 스크롤) 부분은 스크롤바가 세로/가로일 때 사용됩니다. 🎜🎜::-webkit-scrollbar-button:end:increment 또는 ::-webkit-scrollbar-add-button: 스크롤 막대 아래쪽 화살표를 선택합니다(아래로 스크롤). /오른쪽 화살표(오른쪽으로 스크롤) 부분, 스크롤바가 수직/수평일 때 사용됩니다. 🎜🎜🎜3. 사용자 정의 스크롤 막대 🎜🎜필요에 따라 스크롤 막대의 스타일을 사용자 정의할 수 있습니다. 다음은 사용자 정의 스타일의 예입니다. 🎜rrreee🎜코드 분석: 🎜🎜🎜::-webkit -scrollbar -track: 슬라이더와 스크롤 화살표/스크롤 영역 사이의 영역인 스크롤 막대의 트랙 부분을 선택합니다. 배경색, 테두리, 둥근 모서리 등 트랙 스타일을 설정할 수 있습니다. 등. 이 예에서는 둥근 모서리가 설정되었습니다. 🎜🎜::-webkit-scrollbar-thumb: 슬라이더 스타일을 선택합니다. 이 예에서는 둥근 모서리를 설정하고 슬라이더의 배경색과 마우스 오버의 배경색을 설정합니다. 상태. . 🎜🎜::-webkit-scrollbar-corner: 스크롤 막대 모서리 색상을 설정합니다. 일반적으로 컨테이너와 동일한 색상으로 설정합니다. 🎜🎜🎜IV. 요약🎜🎜위의 스크롤 막대를 설정한 후 실제 필요에 따라 설정할 해당 스타일을 선택할 수 있으므로 웹 페이지와 모바일 애플리케이션의 대화형 경험을 더 잘 경험할 수 있습니다. 동시에 위의 예는 Chrome 및 Safari와 같은 일부 Webkit 기반 브라우저에 주로 적용 가능하다는 점에 유의해야 합니다. 다른 브라우저에 적용하려면 다른 스타일과 속성을 사용해야 합니다. 🎜

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