浏览器页面滑动条样式_横向滚动条样式-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40055619/article/details/118632425

本文介绍了如何在Vue全局和Element UI组件内部修改滚动条的样式，包括设置宽度、颜色、渐变和鼠标悬停效果，并展示了如何使用el-scrollbar组件及其API来实现滚动到指定位置的功能。适合前端开发者了解和定制滚动条视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

改变自己设置的滚动条

::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

改变页面的滚动条全局 ::-webkit-scrollbar vue 在App.vue内部定义

html {
    overflow: auto;
}
body {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0 2px 0 0;
    overflow-y: scroll;
    /*overflow-x: scroll;*/
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}
/*::-webkit-scrollbar-track — 滚动条轨道.*/
::-webkit-scrollbar-track {
    /*阴影*/
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    /*圆角*/
    -webkit-border-radius: 10px;
    border-radius: 10px;
    margin: 5px;
}
/*::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.*/
::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    -webkit-border-radius: 10px;
    border-radius: 10px;
    /*background: rgba(255,0,0,0.8);*/
    background-color: lightsalmon;
    /*渐变*/
    /*background-image: linear-gradient(#e66465, #9198e5);*/
    /*background-image: linear-gradient(#FF6666, #CCFFFF);*/
}
::-webkit-scrollbar-thumb:window-inactive {
    /*background: rgba(255,0,0,0.4);*/
    background-color: deepskyblue;
}

vue 全局

/* 全局滚动条 */

/*!/ 滚动条的宽度*/
::-webkit-scrollbar {
  width: 12px;
/*!/ 横向滚动条*/
/*  height: 10px;*/
/*!/ 纵向滚动条 必写*/
  overflow-x: hidden;
}
/*!/ 滚动条的滑块*/
   ::-webkit-scrollbar-thumb {
     background-color: #f56c6c;
     border-radius: 10px;
   }
/*!/ 滚动条的轨道*/
   ::-webkit-scrollbar-track {
     background-color: white;
     -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
     border-radius: 10px;
   }

改变滚动条 .vue elementUI Scrollbar 组件内部页面的

> /* 标签el-scrollbar 实现滚动条 */
Scrollbar
Vue.use(Scrollbar)
<div style="height:600px;">
    <el-scrollbar style="height:100%">

<el-scrollbar style="height: 100%"></el-scrollbar>

 /deep/ .el-scrollbar{
    margin-right: -15px;
    overflow: hidden;
  }
  /deep/ .el-scrollbar__wrap {
    overflow-x: hidden;  // 横向隐藏
  }
  /deep/ .el-scrollbar__thumb{
    background-color: red;  // 背景颜色
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  }
  /deep/ .el-scrollbar__thumb:hover{
    background-color: greenyellow;
  }
  /deep/ .el-scrollbar__bar{
    &.is-vertical{
      width:12px;//滚动条宽度
    }

  el-scrollbar 使用以及滚动到指定位置
https://blog.youkuaiyun.com/csdn_yudong/article/details/106505002

el-table 滚动条局部

el-table 添加height属性, 出现滚动条,  height="600"

  // el-table 滚动条
  // 滚动条的宽度
  /deep/ ::-webkit-scrollbar {
    width: 6px; // 横向滚动条
    height: 6px; // 纵向滚动条 必写
    background-color: greenyellow;
    border-radius: 3px;

      overflow-x: hidden;

  }
  // 滚动条的滑块
  /deep/ ::-webkit-scrollbar-thumb {
    background-color: red;
    border-radius: 3px;
  }
/*  // 滚动条的轨道
  /deep/ ::-webkit-scrollbar-track {  }*/
/*// 轨道 按钮
 /deep/ ::-webkit-scrollbar-button{   background: red; }*/

解决el-table 加了height滚动条之后header上面右侧有白色

  /* 表格 */
  /deep/ .el-table{
    padding-right: 6px;
  }

  # el-table
```html
<el-table 
	:data="itemCatList" 
	style="width: 100%;margin-bottom: 20px;" 
	row-key="id"
表头设置样式 
   :header-cell-style="{background:'transparent',color:'white','text-align':'center'}"
表 body设置样式
   :cell-style="{'text-align':'center'}"
是否展示表头
   :show-header="false"
使表格出现滚动条
   height="600">