CSS를 사용하여 아름다운 스크롤 막대 스타일을 사용자 정의하는 방법을 단계별로 가르쳐주세요!

사용자 정의 스크롤 막대는 현재 점점 더 대중화되고 있으며 연구할 가치가 있습니다. 다음 문서에서는 스크롤 막대의 구성 요소를 이해하고 CSS를 사용하여 스크롤 막대 스타일을 사용자 정의하는 방법을 소개합니다.

(학습 영상 공유: css 영상 튜토리얼)

맞춤 스크롤이 필요한 이유는 무엇인가요? 브라우저의 기본 스크롤 막대는 UI가 여러 운영 체제에서 일관되지 않게 보이도록 만듭니다. 정의된 스크롤을 사용하면 스타일을 통합할 수 있습니다.

저는 항상 CSS에서 스크롤 막대를 사용자 정의하는 방법에 관심이 있었지만 그렇게 할 기회는 없었습니다. 오늘은 제가 공부하는 과정을 기록하겠습니다.

소개

우선 스크롤바의 구성요소를 소개해야 합니다. 다음 그림과 같이 스크롤 막대에는 track 및 thumb가 포함되어 있습니다. track 和 thumb，如下图所示：

track是滚动条的基础，其中的 thumb是用户拖动支页面或章节内的滚动。

还有一件重要的事情要记住，滚动条可以水平或垂直地工作，这取决于设计。另外，在一个多语言网站上工作时，这一点也会发生变化，该网站在从左到右（LTR）和从右到左（RTL）两个方向上工作。

自定义滚动条设计

拥有一个自定义的滚动条曾经是webkit的专利，所以Firefox和IE被排除在游戏之外。我们有一种新的语法，只在Firefox中使用，当它被完全支持时，将使我们的工作更容易。我们先看一下旧的Webkit语法，然后再介绍新的语法。

1、旧的语法

滚动条的宽度

首先，我们需要定义滚动条的大小。这可以是垂直滚动条的宽度，也可以是水平滚动条的高度。

.section::-webkit-scrollbar {
    width: 10px;
}

有了这一设置，我们就可以设置滚动条本身的样式。

滚动条 track

这代表了滚动条的基础。我们可以通过添加background、shadows、border-radius和border来对它进行造型。

.section::-webkit-scrollbar-track {
    background-color: darkgrey;
}

滚动条 thumb

准备好了滚动条的基础后，我们就需要对滚动条的thumb进行样式设计。这很重要，因为用户可能会拖动这个thumb与滚动条进行交互。

.section::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

至此，我们已经介绍了CSS中定制滚动条的老方法。让我们探索一下新的语法。

2、新语法

Scrollbar Width

正如它所说的，这定义了滚动条的宽度，有两个值auto 和 thin。不好的地方就是，我们不能像webkit的语法那样定义一个具体的数字。

.section {
  scrollbar-width: thin;
}

Scrollbar Color

有了这个属性，我们可以为滚动条 track和thumb定义成对值的颜色。

.section {
    scrollbar-color: #6969dd #e0e0e0;
    scrollbar-width: thin;
}

尽管这个新语法很简单，但它是有限制的。我们只能添加颜色。我们不能添加shadows`、gradients、rounded，或任何类似的东西，我们被允许定制的只是颜色。

指定自定义滚动条的范围

要知道的一个重要问题是，在哪里定制滚动条。你希望样式是通用的，对网站上的所有滚动条都有效吗？还是你只想让它用于特定的部分？

使用旧的语法，我们可以编写选择器，而不必将它们附加到元素上，它们将应用于所有可滚动的元素。

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background-color: darkgrey;
}

::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

如果你想只适用于一个特定的部分，你需要在选择器之前附加元素。

.section::-webkit-scrollbar {
    width: 10px;
}

.section::-webkit-scrollbar-track {
    background-color: darkgrey;
}

.section::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

对于新的语法，它几乎是一样的。我注意到的是，如果你想要一个通用的样式，它应该被应用于元素，而不是。

html {
    scrollbar-color: #6969dd #e0e0e0;
    scrollbar-width: thin;
}

我尝试为

track은 스크롤 막대의 기초입니다. >thumb 사용자가 페이지나 장 내에서 스크롤을 지원하기 위해 드래그하고 있습니까?

기억해야 할 또 하나의 중요한 사항, 스크롤바는 디자인에 따라 가로 또는 세로로 작동할 수 있습니다. 또한 왼쪽에서 오른쪽(LTR) 및 오른쪽에서 왼쪽(RTL) 방향으로 작동하는 다국어 웹 사이트에서 작업할 때 이러한 상황이 변경됩니다.

커스텀 스크롤바 디자인

커스텀 스크롤바를 갖는 것은 예전에 웹킷 특허였기 때문에 Firefox와 IE는 게임에서 제외되었습니다. Firefox에서만 사용되는 새로운 구문이 있는데, 완전히 지원되면 작업이 더 쉬워집니다. 먼저 기존 Webkit 구문을 살펴보고 새로운 구문을 소개하겠습니다.

1. 이전 구문 🎜

🎜🎜스크롤 막대 너비🎜🎜🎜먼저 스크롤 막대의 크기를 정의해야 합니다. 세로 스크롤 막대의 🎜너비🎜 또는 가로 스크롤 막대의 🎜높이🎜일 수 있습니다. 🎜

.section::-webkit-scrollbar {
    width: 16px;
}
 
.section::-webkit-scrollbar-track {
    background-color: #e4e4e4;
    border-radius: 100px;
}
 
.section::-webkit-scrollbar-thumb {
    background-color: #d4aa70;
    border-radius: 100px;
}

🎜이 설정을 사용하면 스크롤바 자체의 스타일을 지정할 수 있습니다. 🎜🎜🎜스크롤바 트랙🎜🎜🎜스크롤바의 기본을 나타냅니다. 배경, 그림자, 테두리 반경 및 테두리를 추가하여 스타일을 지정할 수 있습니다. 🎜

.section {
    scrollbar-color: #D4AA70 #e4e4e4;
}

🎜🎜스크롤바 썸🎜🎜🎜스크롤바의 기초를 준비한 후 스크롤바의 thumb 스타일을 지정해야 합니다. 사용자가 이 엄지손가락을 드래그하여 스크롤바와 상호작용할 수 있기 때문에 이는 중요합니다. 🎜

.section::-webkit-scrollbar-thumb {
    background-image: linear-gradient(180deg, #D0368A 0%, #708AD4 99%);
    box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
    border-radius: 100px;
}

🎜지금까지 CSS에서 스크롤 막대를 맞춤설정하는 기존 방법을 소개했습니다. 새로운 구문을 살펴보겠습니다. 🎜

🎜2. 새로운 구문 🎜🎜

🎜🎜Scrollbar Width🎜🎜🎜 이것은 스크롤바의 너비를 정의합니다. 값은 ​​auto 및 thin입니다. 나쁜 점은 웹킷의 구문처럼 특정 숫자를 정의할 수 없다는 것입니다. 🎜

.section::-webkit-scrollbar-thumb {
    border-radius: 100px;
    background: #8070D4;
    border: 6px solid rgba(0,0,0,0.2);
}

🎜🎜Scrollbar Color🎜🎜🎜이 속성을 사용하면 스크롤바 track 및 thumb에 대해 쌍을 이루는 값의 색상을 정의할 수 있습니다. 🎜

/* 旧语法 */
.section::-webkit-scrollbar-thumb:hover {
    background-color: #5749d2;
}

/* 新语法 */
.section {
    scrollbar-color: #d4aa70 #e4e4e4;
    transition: scrollbar-color 0.3s ease-out;
}

.section:hover {
    scrollbar-color: #5749d2;
}

🎜이 새로운 구문은 간단하지만 제한 사항이 있습니다. 색상만 추가할 수 있습니다. 그림자`, 그라디언트, 둥근 또는 유사한 항목을 추가할 수 없습니다. 사용자 정의할 수 있는 것은 색상뿐입니다. 🎜🎜🎜🎜사용자 정의 스크롤 막대 범위 지정🎜🎜🎜🎜알아야 할 중요한 질문은 스크롤 막대를 사용자 정의할 위치입니다. 사이트의 모든 스크롤바에 대해 스타일이 보편적이고 유효하길 원하시나요? 아니면 특정 구간에만 사용하고 싶으신가요? 🎜🎜이전 구문을 사용하면 요소에 연결하지 않고도 선택기를 작성할 수 있으며 스크롤 가능한 모든 요소에 적용됩니다. 🎜

.section {
    overflow-y: auto;
}

🎜 특정 섹션에만 적용하려면 선택자 앞에 요소를 추가해야 합니다. 🎜rrreee🎜새로운 구문을 사용하면 거의 동일합니다. 제가 알아낸 점은 공통 스타일을 원한다면 가 아닌 요소에 적용해야 한다는 것입니다. 🎜rrreee🎜에 위의 내용을 추가하려고 시도했지만 예상대로 작동하지 않았습니다. 🎜🎜이제 기존 구문과 새 구문이 어떻게 작동하는지 알았으니 일부 스크롤바 디자인을 사용자 정의해 보겠습니다. 🎜🎜🎜🎜사용자 정의 스크롤 막대 디자인🎜🎜🎜🎜🎜예 1🎜🎜🎜🎜🎜

在研究定制滚动条之前，值得讨论一下Mac OS中的默认样式。下面是它的外观。

• 滚动条track 的左右两边都有边框，背景色为纯色。
• 滚动条thumb是圆形的，左右两边都有空间。

对于Windows，它有点不同。

下面是我们根据上面的模拟图来定制滚动条。

.section::-webkit-scrollbar {
    width: 16px;
}
 
.section::-webkit-scrollbar-track {
    background-color: #e4e4e4;
    border-radius: 100px;
}
 
.section::-webkit-scrollbar-thumb {
    background-color: #d4aa70;
    border-radius: 100px;
}

为 track 和thumb添加border-radius是必要的，因为它在::webkit-scrollbar上不起作用。

在新的语法中，我们不能调整滚动条的宽度，唯一能做的的是改变 track 和thumb的背景颜色。

.section {
    scrollbar-color: #D4AA70 #e4e4e4;
}

例2

对于这个例子，设计有点重，因为它包含渐变和阴影。我们可以应用内部阴影和渐变来模仿这种效果。来看看怎么做!

.section::-webkit-scrollbar-thumb {
    background-image: linear-gradient(180deg, #D0368A 0%, #708AD4 99%);
    box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
    border-radius: 100px;
}

示例地址：https://codepen.io/shadeed/pen/VwpOReG

例3

我们还可以为 thumb 和track添加边框，这可以帮助我们处理一些棘手的设计。

.section::-webkit-scrollbar-thumb {
    border-radius: 100px;
    background: #8070D4;
    border: 6px solid rgba(0,0,0,0.2);
}

基于同样的例子，我们可以重置顶部和底部边界为零，这样thumb获得一个有趣的效果。注意thumb顶部和底部的那些小元素。

示例地址：https://codepen.io/shadeed/pen/qBrGvOx

可以添加悬停效果吗？

我们可以为新旧语法的滚动条thumb添加悬停效果。

/* 旧语法 */
.section::-webkit-scrollbar-thumb:hover {
    background-color: #5749d2;
}

/* 新语法 */
.section {
    scrollbar-color: #d4aa70 #e4e4e4;
    transition: scrollbar-color 0.3s ease-out;
}

.section:hover {
    scrollbar-color: #5749d2;
}

需要时显示滚动条

创建一个可滚动的元素是可以通过给overflow属性添加一个除visible以外的值。建议使用auto关键字，因为它只在内容超过其容器时才会显示滚动条。

.section {
    overflow-y: auto;
}

可访问性问题

在定制滚动条设计时，请记住在 thumb 和 track之间要有良好的对比，这样它就容易被用户注意。

考虑一下下面这个自定义滚动条的 "坏 "例子。

thumb 的颜色几乎看不出来。这对用户来说不是好事，因为如果他们习惯于通过thumb 滚动，这将增加他们的难度。

英文原文地址：https://ishadeed.com/article/custom-scrollbars-css/

作者：ishadeed

更多编程相关知识，请访问：编程入门！！

위 내용은 CSS를 사용하여 아름다운 스크롤 막대 스타일을 사용자 정의하는 방법을 단계별로 가르쳐주세요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!