How to set the height of the scroll bar in css

青灯夜游
Release: 2023-01-06 11:12:42
Original
16218 people have browsed it

How to set the height of the scroll bar in css: First use the "::-webkit-scrollbar" selector to select the entire scroll bar, and then use the height attribute to set the height of the scroll bar. The syntax format is "::-webkit-scrollbar" {height:height value;}".

How to set the height of the scroll bar in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

css sets the style of the scroll bar

Note: The width and height set by the scroll bar correspond to the vertical scroll bar width and horizontal scroll bar height respectively. The vertical scroll bar cannot be modified. The scroll bar height and horizontal scroll bar width values ​​only introduce the Google browser scroll bar style. Commonly used attributes are as follows:

::-webkit-scrollbar

Overall scroll bar style

::-webkit-scrollbar-button

Once the scroll bar style is set, the button icons at both ends of the scroll bar disappear, but you can reset the image and new style

::-webkit-scrollbar-track

Outer track

::-webkit-scrollbar-track-piece

Inner track, it will overwrite the style of the outer track scrollbar-track

::-webkit-scrollbar-thumb

::-webkit-scrollbar-thumb:hover

::-webkit-scrollbar-thumb:vertical:hover

::-webkit-scrollbar-thumb:horizontal:hover

Slider

Slider suspension

Vertical slider suspension

Horizontal slider suspension

::-webkit-scrollbar-corner

Corner, the intersection of two scroll bars

Note: The width and height of the scroll bar settings correspond to the vertical scroll bar width and horizontal scroll bar height respectively. The vertical scroll bar height and horizontal scroll bar width values ​​cannot be modified

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

Note: The above situation also exists for the buttons at both ends of the scroll bar

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

The picture below is an example. If you are interested, you can try it and post the source code

 <!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>
Copy after login

Learning video sharing: css video tutorial

The above is the detailed content of How to set the height of the scroll bar in css. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template