導入

この記事では、CSSでカスタムスクロールバーの作り方を説明します.CSSを使用したカスタムスクロールバーは、ウェブサイトにとって非常に有用で重要なことです.それはウェブサイトをより美しく魅力的にします.

始めましょう

HTMLの設定

ページの骨格構造を作りましょう.

<div class="container">
  <div class="box">Scroll Down</div>
</div>
<div class="container">
  <div class="box">Hello World</div>
</div>

レイアウトのスタイル

スクロールを作成するために、ボックスの高さを100 %に設定しましょう.

body{
  background: #10172A;
  color: white;
  height: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.container{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.box{
  height: 100%;
  font-size: 40px;
}

簡単な一瞥.

スクロールバー勾配を作る時間です🌈

/* Gradient Scroll Bar */

/* width */
::-webkit-scrollbar {
  width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 100vh;
  background: #1f2937;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: linear-gradient(rgb(134, 239, 172), rgb(59, 130, 246), rgb(147, 51, 234));
}

スクロールバーの最終的な外観です.

結論

私はあなたのカスタムCSSグラデーションスクロールバーを作る上でこのチュートリアルを楽しんだことを願っています.それが何であろうとも、私はあなたがあなたのウェブサイトをものすごく見えるようにこのCSSコードを使うことができることを望みます.お友達とこのチュートリアルを共有し、いつでも質問があればお気軽にお問い合わせください.
最近、新製品を発売しました.
Let's Lorem Ipsum -
これはプレースホルダのテキストを生成するツールです.それは素晴らしいコンテンツを作成するためにUXデザイナー、ビジュアルデザイナー、コピーライターを支援します.

つながりましょう

GitHub

Buy me a coffee