Vue でスクロールバーのスタイルを変更する方法

::-webkit-scrollbar スクロールバー全体、幅等を設定できます。
::-webkit-scrollbar-thumb スクロールバー内のスライダー
::-webkit-scrollbar-button スクロールバートラックの両端にあるボタンをクリックすると、スライダーの位置を微調整できます。
::-webkit-scrollbar-track スクロールバーのトラック（内側につまみがある）
::-webkit-scrollbar-track-piece スライダーのないスクロールバーのトラック部分
::-webkit-scrollbar-corner 垂直スクロールバーと水平スクロールバーの交差点
::-webkit-resizer 一部の要素の角部分（テキストエリアのドラッグ可能なボタンなど）

これをある程度理解したら、スクロールバーのスタイルの変更を開始できます。

コード実装:

<ul class="nav-tabs-scroll">
  <li v-for="(item,index) タブ内" :key="index" class="nav-item-scroll">{
<!-- -->{item.text}}</li>
</ul>
<v-textarea アウトライン v-model="text" style="width: 200px; margin: 16px;" class="text"></v-textarea>

データ: () => ({
      タブ: [
        { 値: 4001、テキスト: 'ローンログ'、コード: 'LOAN_LOG' },
        { 値: 4002、テキスト: 'ドキュメント ログ'、コード: 'DOCUMENT_LOG' },
        { 値: 4003、テキスト: 'メモログ'、コード: 'NOTE_LOG' },
        { 値: 4004、テキスト: '操作ログ'、コード: 'OPERATION_LOG' },
        { 値: 4005、テキスト: '支払いログ'、コード: 'PAYMENT_LOG' },
        { 値: 4006、テキスト: 'メンテナンス ログ'、コード: 'MAINTENANCE_LOG' },
        { 値: 4007、テキスト: 'トランザクション ログ'、コード: 'TRANSACTION_LOG' },
        { 値: 4008、テキスト: 'コレクション ログ'、コード: 'COLLECTION_LOG' }、
        { 値: 4001、テキスト: 'ローンログ'、コード: 'LOAN_LOG' },
        { 値: 4002、テキスト: 'ドキュメント ログ'、コード: 'DOCUMENT_LOG' },
        { 値: 4003、テキスト: 'メモログ'、コード: 'NOTE_LOG' },
        { 値: 4004、テキスト: '操作ログ'、コード: 'OPERATION_LOG' },
        { 値: 4005、テキスト: '支払いログ'、コード: 'PAYMENT_LOG' },
        { 値: 4006、テキスト: 'メンテナンス ログ'、コード: 'MAINTENANCE_LOG' },
        { 値: 4007、テキスト: 'トランザクション ログ'、コード: 'TRANSACTION_LOG' },
        { 値: 4008、テキスト: 'コレクション ログ'、コード: 'COLLECTION_LOG' }、
        { 値: 4001、テキスト: 'ローンログ'、コード: 'LOAN_LOG' },
        { 値: 4002、テキスト: 'ドキュメント ログ'、コード: 'DOCUMENT_LOG' },
        { 値: 4003、テキスト: 'メモログ'、コード: 'NOTE_LOG' },
        { 値: 4004、テキスト: '操作ログ'、コード: 'OPERATION_LOG' },
        { 値: 4005、テキスト: '支払いログ'、コード: 'PAYMENT_LOG' },
        { 値: 4006、テキスト: 'メンテナンス ログ'、コード: 'MAINTENANCE_LOG' },
        { 値: 4007、テキスト: 'トランザクション ログ'、コード: 'TRANSACTION_LOG' },
        { 値: 4008、テキスト: 'コレクション ログ'、コード: 'COLLECTION_LOG' }
      ]、
      文章： ''
    }）、

<style lang="scss" スコープ>
  .nav-tabs-scroll {
    高さ: 100px;
    リストスタイル: なし;
    マージン: 0px;
    パディング: 16px 0;
    オーバーフローx: 自動;
    表示: インラインブロック;
    空白: ラップなし;
    幅: 100%; 
    背景: #F9FAFD;
  }
  .nav-item-scroll {
    背景: #E5F0FF;
    色: #24252E;
    フォントサイズ: 12px;
    フォントの太さ: 400;
    行の高さ: 16px;
    パディング: 8px 8px 180px;
    テキスト配置: 中央;
    表示: インライン;
    マージン: 0 4px 0;
    境界線の半径: 16px;
  }
  .nav-tabs-scroll::-webkit-scrollbar {
    幅: 20px;
    高さ: 10px;
  }
  .nav-tabs-scroll::-webkit-scrollbar-thumb {
    境界線の半径: 5px;
    背景: 赤;
  }
  .nav-tabs-scroll::-webkit-scrollbar-button {
    幅: 10px;
    境界線の半径: 50%;
    背景：黒;
  }
  .nav-tabs-scroll::-webkit-scrollbar-track {
    ボックスシャドウ: インセット 0 0 2px #333;
    境界線の半径: 5px;
    背景: 青;
  }
  .nav-tabs-scroll::-webkit-scrollbar-corner {
    背景: スプリンググリーン;
  }
  /*
  .nav-tabs-scroll::-webkit-scrollbar-track-piece {
    ボックスシャドウ: インセット 0 0 2px #333;
    境界線の半径: 5px;
    背景：プラム;
  }
  */
</スタイル>
<スタイル>
  .text.v-textarea テキストエリア::-webkit-resizer {
    背景: ピンク;
  }
</スタイル>

デフォルトのスタイル:

変更されたスタイル:

これで、Vue でスクロールバーのスタイルを変更する方法についての記事は終了です。Vue でスクロールバーのスタイルを変更する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: