自定义滚动条的方法

首先

由於預設的滾動條與設定的背景色不相符，因此我嘗試尋找自定義滾動條的方法。

环境：自然和人为因素的共同作用在特定地区内所形成的一切条件和影响。

"dependencies": {
    "react": "^18.2.0",
    "@chakra-ui/react": "^2.7.1",
    "@emotion/react": "^11.11.1",
  }

CSS的应用方法

在React中，有很多种方法可以应用CSS。这次我们选择了在安装Chakra UI的同时，使用Emotion进行应用的方法。

适用案例：

import { Text } from "@chakra-ui/react";
import { css } from "@emotion/react";

function MyComponent() {
  return (
    <Text
      css={css`
        color: red;
      `}
    >
      赤色です。
    </Text>
  );
}

自定义滚动条

基于WebKit的浏览器（如Chrome、Safari）和火狐（Firefox）的应用方法有所不同。

:: -webkit-scrollbar和 :: -webkit-scrollbar-thumb等

除了Firefox和iOS之外，还支持其他平台。

滚动条宽度和滚动条颜色

Firefox支援到23版。

由于针对所有浏览器进行统一设置似乎很困难，因此可能需要重复设置同一项目。然而，由于不同浏览器的设置内容不同，似乎无法完全匹配。

滚动条自定义示例：

import { Box } from "@chakra-ui/react";
import { css } from "@emotion/react";

function MyComponent() {
  return (
    <Box
      overflowY="auto"
      css={css`
        /* Chrome, Safari, ... */
        &::-webkit-scrollbar {
          width: 7px;
        }
        &::-webkit-scrollbar-thumb {
          background-color: #718096;
          border-radius: 5px;
        }
        /* Firefox */
        scrollbar-width: thin;
        scrollbar-color: #718096 transparent;
      `}
    >
      {/* 長い内容 */}
    </Box>
  );
}

各个项目的说明

&::-webkit-scrollbar可以被原生地用中文表达成：

&::-webkit-scrollbar {
  width: 7px;
}

这部分代码是用来为基于WebKit的浏览器（如Google Chrome和Safari）设置滚动条宽度的。

width: 7px : これにより、スクロールバーの幅が7ピクセルに設定されます。

&::-webkit-scrollbar-thumb 用中文进行一个选项进行改写：

&::-webkit-scrollbar-thumb {
  background-color: #718096;
  border-radius: 5px;
}

这部分代码定义了基于WebKit的浏览器中用户在拖动滚动条时的“滑块”（thumb）的样式。

background-color: #718096
スクロールバーのつまみの背景色を設定しています。

border-radius: 5px
スクロールバーのつまみの角が丸くなり、5ピクセルの半径で丸みを帯びるよう設定しています。

Firefox样式

scrollbar-width: thin;
scrollbar-color: #718096 transparent;

在Firefox中，可以使用scrollbar-width属性来控制滚动条的宽度2。然而，与基于WebKit的浏览器不同，它不能以具体的像素数进行指定。
可用的选项有auto（浏览器默认值）、thin和none，总共三个选项。

scrollbar-width: thin
Firefoxでのスクロールバーの幅を狭く（細く）する設定です。

scrollbar-color: #718096 transparent
スクロールバーのつまみとトラック（背景）の色を設定しています3。
つまみは#718096に、トラックは透明に設定されています。

最后

我意识到需要时刻关注浏览器的兼容性情况进行信息收集。
另外，在撰写这篇文章时，重新调查了一下将CSS应用到React的方法，
我惊讶地发现有比我想象中多得多的方法。
因为每种方法都有其利弊，我打算亲自尝试并确认一下。