CSSはスクロールバーのスタイルを設定します

CSS (Cascading Style Sheets) は、フロントエンド開発で最も頻繁に使用されるテクノロジの 1 つであり、豊かなページの視覚効果を実現できます。その中で、カスタム スクロール バー スタイルも共通の要件です。この記事では、CSSを使用してスクロールバーのスタイルを設定する方法を紹介します。

1. 基本的なスクロール バー スタイル

CSS は、いくつかの基本的なスクロール バー スタイル設定を提供します。スタイル シートのスクロール バーに次の属性を追加できます:

/* 垂直滚动条样式 */
/* 宽度 */
::-webkit-scrollbar {
    width: 12px;
}
/* 背景色 */
::-webkit-scrollbar-track {
    background-color: #f5f5f5;
}
/* 滑块颜色 */
::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
}

/* 水平滚动条样式 */
/* 高度 */
::-webkit-scrollbar {
    height: 12px;
}
/* 背景色 */
::-webkit-scrollbar-track {
    background-color: #f5f5f5;
}
/* 滑块颜色 */
::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
}

• ::-webkit-scrollbar: スクロール バーの幅 (または高さ) を設定します。垂直スクロール バーの場合は width 属性が機能し、水平スクロール バーの場合は height 属性が機能します。
• ::-webkit-scrollbar-track: スクロール バーの背景色を設定します。
• ::-webkit-scrollbar-thumb: スクロール バー スライダーの色を設定します。

上記のコードを使用すると、スクロール バーにシンプルな灰色のスタイルを追加できます。ただし、このスタイルは、ページ スタイルにうまく統合できるほど目立たない可能性があります。さらにパーソナライズされたスクロール バー スタイル設定を以下にいくつか紹介します。

2. スライダーと背景色のカスタマイズ

スクロール バーのスライダーと背景色をカスタマイズするには、background 属性を使用してこれら 2 つの部分をカスタマイズします。たとえば、グラデーション効果を使用して、スライダーの色をある色値から別の色値にレンダリングできます。

/* 垂直滚动条样式 */
/* 宽度 */
::-webkit-scrollbar {
    width: 12px;
}
/* 背景 */
::-webkit-scrollbar-track {
    background: linear-gradient(to bottom, #f5f5f5, #e8e8e8);
}
/* 滑块 */
::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #a1a1a1, #6b6b6b);
}

/* 水平滚动条样式 */
/* 高度 */
::-webkit-scrollbar {
    height: 12px;
}
/* 背景 */
::-webkit-scrollbar-track {
    background: linear-gradient(to right, #f5f5f5, #e8e8e8);
}
/* 滑块 */
::-webkit-scrollbar-thumb {
    background: linear-gradient(to right, #a1a1a1, #6b6b6b);
}

ここではCSSの線形グラデーションを使用しています。スライダーと背景色のグラデーション効果により、スクロール バーのスタイルを柔らかくすることができます。

3. スクロール バーを非表示にする

特定の状況では、スクロール バーを非表示にする必要がある場合があります。現時点では、2 つのプロパティ scrollbar-width と scrollbar-height を使用して、スクロール バーの幅または高さを 0 に設定できます。ただし、この方法ではスクロール バーをある程度までしか非表示にできません。これは、マウスを移動するとスクロール バーが自動的に表示され、マウスの移動に応じて位置が変更されるためです。

body {
    scrollbar-width: none; /* 隐藏垂直滚动条 */
    -ms-overflow-style: none; /* 隐藏IE/Edge浏览器的垂直滚动条 */
}

/* 设置最外层容器的高度 */
.scroll-container {
    height: 500px;
    overflow-y: scroll; /* 自动出现滚动条 */
}

上記のコードでは、scrollbar-width を none に設定して、垂直スクロール バーを非表示にします。同時に、スクロール バーを自動的に表示するために、overflow-y プロパティをスクロールに設定します。これにより、ページがコンテナからオーバーフローしたときにスクロール バーが自動的に表示されます。

IE および Edge ブラウザのスクロール バーのスタイル設定では -ms-overflow-style 属性を使用する必要があるため、より注意してください。

4. スクロール バーの丸い角と影の効果をカスタマイズする

最後に、丸い角や影など、より鮮やかな視覚効果をスクロール バーに追加できます。 CSS の border-radius プロパティを使用して角の丸みを制御し、box-shadow プロパティを使用して影効果を追加できます。

/* 垂直滚动条样式 */
/* 宽度 */
::-webkit-scrollbar {
    width: 12px;
}
/* 背景 */
::-webkit-scrollbar-track {
    background: linear-gradient(to bottom, #f5f5f5, #e8e8e8);
}
/* 滑块 */
::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #a1a1a1, #6b6b6b);
    border-radius: 5px; /* 圆角 */
    box-shadow: inset 0 0 6px rgba(0,0,0,.3); /* 阴影 */
}

/* 水平滚动条样式 */
/* 高度 */
::-webkit-scrollbar {
    height: 12px;
}
/* 背景 */
::-webkit-scrollbar-track {
    background: linear-gradient(to right, #f5f5f5, #e8e8e8);
}
/* 滑块 */
::-webkit-scrollbar-thumb {
    background: linear-gradient(to right, #a1a1a1, #6b6b6b);
    border-radius: 5px; /* 圆角 */
    box-shadow: inset 0 0 6px rgba(0,0,0,.3); /* 阴影 */
}

上記のコードでは、スクロール バーをより立体的に見せるために、スクロール バーのスライダーに丸い角と影の効果を追加しています。

つまり、CSS の関連プロパティを通じてスクロール バーのスタイルを簡単にカスタマイズできるため、ページがよりパーソナライズされ、ユーザー エクスペリエンスが向上します。上記のコードは参照のみを目的としており、読者は自分のニーズに応じて、より柔軟なスクロール バー スタイルをデザインできます。

以上がCSSはスクロールバーのスタイルを設定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。