ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSでスクロールバーをカスタマイズする方法(コード)

CSSでスクロールバーをカスタマイズする方法(コード)

不言
リリース: 2018-07-21 11:50:23
オリジナル
2954 人が閲覧しました

この記事では、CSS でスクロール バー (コード) をカスタマイズする方法を紹介します。必要な方はぜひ参考にしてください。

html↓

<p></p>
ログイン後にコピー

css↓

.test {
      display: inline-block;
      margin: 60px 40%;
      width: 280px;
      padding: 5px 4px;
      min-height: 20px;
      line-height: 20px;
      max-height: 72px;
      border: 1px solid #ccc;
      font-size: 12px;
      word-wrap: break-word;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-user-modify: read-write-plaintext-only;
      border-radius: 4px;
    }
      .test::-webkit-scrollbar {
      width: 4px;
      height: 1px;
    }
    .test::-webkit-scrollbar-thumb {
      border-radius: 4px;
      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      background: #C8C8C8;
    }
    .test::-webkit-scrollbar-track {
      border-radius: 4px;
      background-color: #FFFFFF;
    }
ログイン後にコピー

レンダリング

CSSでスクロールバーをカスタマイズする方法(コード)

関連する推奨事項:

CSSを使用して丸い境界線の効果を実現する方法

CSS ドットを実装する線のスタイル 点線と破線の2通り(例)

以上がCSSでスクロールバーをカスタマイズする方法(コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート