検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSでスクロールバーの高さを設定する方法

CSSでスクロールバーの高さを設定する方法

青灯夜游
青灯夜游オリジナル
2021-05-12 17:20:0316314ブラウズ

CSS でスクロール バーの高さを設定する方法: まず、「::-webkit-scrollbar」セレクターを使用してスクロール バー全体を選択し、次に height 属性を使用してスクロールの高さを設定します。 bar。構文形式は「::-webkit-scrollbar" {height:height value;}」です。

CSSでスクロールバーの高さを設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

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

注: スクロール バーによって設定される幅と高さは、それぞれ垂直スクロール バーの幅と水平スクロール バーの高さに対応します。垂直スクロール バーは変更できません。スクロール バーの高さと水平スクロール バーの幅の値は、Google ブラウザのスクロール バー スタイルを導入するだけです。一般的に使用される属性は次のとおりです:

外側のトラック ## ::-webkit-scrollbar-track-piece内側のトラック、外側のトラックのスタイルを上書きします。 # ::-webkit-scrollbar-thumb::-webkit-scrollbar-thumb:vertical:hoverSlider#注: スクロール バーの設定の幅と高さは、それぞれ垂直スクロール バーの幅と水平スクロール バーの高さに対応します。スクロール バーの高さと水平スクロール バーの幅の値は変更できません注: 上記の状況はスクロール バーの両端のボタンにも存在します

::-webkit-scrollbar

全体的なスクロール バー スタイル

::-webkit-スクロールバーのスタイルを設定すると、スクロールバーの両端のボタンアイコンが消えますが、画像と新しいスタイルをリセットできます。

#::-webkit-scrollbar-track

::-webkit-scrollbar-thumb:hover

::-webkit-scrollbar-thumb:horizo​​ntal:hover

スライダー サスペンション

垂直スライダー サスペンション

水平スライダー サスペンション

::-webkit-scrollbar-corner

コーナー、2 つの交差点スクロール バー

 

/* 1,滚动条 */
     ::-webkit-scrollbar {
      width: 20px;          /* 纵向滚动条 宽度 */
      height: 15px;         /* 横向滚动条 高度 */
      background: pink;   /* 整体背景 */
      border-radius: 10px;  /* 整体 圆角 */
    }

 

/* 2,滚动条两端的按钮 */
    ::-webkit-scrollbar-button{
      width: 30px;          /* 横向滚动条 宽度 */
      height: 20px;          /* 纵向滚动条 高度 */
      background: black;
      border-radius: 10px;
    }

下の写真は例です。興味があれば、試してみてソース コードを投稿してください		 
 <!DOCTYPE html>
<html add="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 1. 导入Vue包 -->
  <script src="./lib/vue-2.4.0.js"></script>
  <style>
    #app>div {
      float: left;
      width: 400px;
      height: 400px;
      margin-top: 100px;
    }
 
    .frame {
      background: yellow;
      position: relative;
    }
 
    .contentbox {
      width: 100%;
      height: 100%;
      overflow-x: scroll;
      overflow-y: scroll;
      /*三角箭头的颜色*/
      scrollbar-arrow-color: #bec5ca;
      /*立体滚动条的颜色*/
      scrollbar-face-color: #bec5ca;
      /*立体滚动条亮边的颜色*/
      scrollbar-3dlight-color: #bec5ca;
      /*滚动条空白部分的颜色*/
      scrollbar-highlight-color: #bec5ca;
      /*立体滚动条阴影的颜色*/
      scrollbar-shadow-color: #bec5ca;
      /*立体滚动条强阴影的颜色*/
      scrollbar-darkshadow-color: #bec5ca;
      /*立体滚动条背景颜色*/
      scrollbar-track-color: #e5e7eb;
      /*滚动条的基本颜色*/
      scrollbar-base-color: #e5e7eb;
    }
 
    .item {
      width: 400px;
      height: 200px;
      background: green;
      position: relative;
      border: 1px solid blue;
    }
 
     /* 1,滚动条 */
     ::-webkit-scrollbar {
      width: 20px;          /* 纵向滚动条 宽度 */
      height: 15px;         /* 横向滚动条 高度 */
      background: pink;   /* 整体背景 */
      border-radius: 10px;  /* 整体 圆角 */
    }
    /* 2,滚动条两端的按钮 */
    ::-webkit-scrollbar-button{
      width: 30px;          /* 横向滚动条 宽度 */
      height: 20px;          /* 纵向滚动条 高度 */
      background: black;
      border-radius: 10px;
    }
    /* 3,外层轨道 */
    ::-webkit-scrollbar-track {
      /* background: red; */
      border-radius: 10px;
    }
    /* 4.内层轨道，它会覆盖外层轨道的样式。 */
     ::-webkit-scrollbar-track-piece {
      width: 5px;
      background-color:red;
      margin: 0 -2px 0;
    }
    /* 5,滑块 */
    ::-webkit-scrollbar-thumb {
      background: #bec5ca;
      min-height: 50px;
      min-width: 50px;
      border-radius: 10px;
    }
    /* 纵向滑块悬浮 */
    ::-webkit-scrollbar-thumb:vertical:hover {
      background: yellow;
    }
    /* 横向滑块悬浮 */
    ::-webkit-scrollbar-thumb:horizontal:hover {
      background: pink
    }
    /* 6,边角，两个滚动条交汇处 */
    ::-webkit-scrollbar-corner{
      background: blue;
    }
   
  </style>
</head>
 
<body>
  <!-- 2. 创建一个要控制的区域 -->
  <div id="app">
    <div class="frame" ref="frame">
      <div class="memo">这是一个memo</div>
      <div class="arrow" v-show="flag" ref="arrow"></div>
      <div class="contentbox" ref="contentbox">
        <div class="item" v-for="(item,i) in list" :key="item.id">
          <div class="title">{{item.title}}</div>
          <div class="content">{{item.content}}</div>
        </div>
      </div>
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: &#39;#app&#39;,
      data: {
        list: [
          { id: &#39;1&#39;, title: &#39;标题1&#39;, content: &#39;内容1&#39; },
          { id: &#39;2&#39;, title: &#39;标题2&#39;, content: &#39;内容2&#39; },
          { id: &#39;3&#39;, title: &#39;标题3&#39;, content: &#39;内容3&#39; },
          { id: &#39;4&#39;, title: &#39;标题4&#39;, content: &#39;内容4&#39; },
          { id: &#39;5&#39;, title: &#39;标题5&#39;, content: &#39;内容5&#39; },
          { id: &#39;6&#39;, title: &#39;标题6&#39;, content: &#39;内容6&#39; }
        ],
      },
      mounted() {
      },
      methods: {
      },
      
    })
  </script>
</body>
 
</html>

学習ビデオの共有: css ビデオチュートリアル＃＃＃＃＃＃

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

html5 css css3 webkit 选择器
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSで左余白を設定する方法次の記事：CSSで左余白を設定する方法

関連記事

続きを見る