9.16星期五滚动条加粗

Jay_023

已于 2022-10-10 09:33:19 修改

阅读量949

点赞数 5

文章标签：前端 javascript html

于 2022-09-19 08:53:02 首次发布

本文链接：https://blog.csdn.net/m0_53831834/article/details/126884669

版权

一、给所有页面的滚动条加粗加颜色！（已解决）

先找到全局的组件在哪里? VolTable.vue 在这个vue项目（路径是在componet组件里面基础组件里面）里面的script里面修改
添加滚动条的方法:在要实现滚动加载的列表上上添加v-infinite-scroll，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。
首先要知道，修改滚动条样式，利用伪元素-webkit-scrollbar。
vue中#chunk文件是干什么的：一个大文件拆分出来的一部分代码,拆分成小的就为了提高浏览器加载速度的。vue-cli 3.0 打包生成chunk文件的作用是什么 - SegmentFault 思否

（1）chunk是webpack的产物，原始代码里面修改才有用，但我找到一个新的修改方式

但目前就是height和width不能一起设置，不然滚动条会固定不动

伪代码没有用，所以不能在App.vue中使用

https://www.jianshu.com/p/9fd84ef2a074

Webpack 理解 Chunk_glenshappy的博客-CSDN博客_webpack 什么是chunk

在vue项目中修改全局滚动条样式_雨打荷叶的博客-CSDN博客_vue 滚动条样式

vue element 滚动条颜色更改_xiaodanda的博客-CSDN博客_vue 滚动条颜色w

三个样式需要分开写才有效果，不能在{}一段里面修改
修改滚动条的高度宽度

在VolTable.vue 里面<script> 里面修改样式
上面是horizontal水平滚动条
.vol-table ::v-deep(.el-scrollbar__bar.is-horizontal) {
  height: 11px;

}

下面是vertical垂直滚动条
.vol-table ::v-deep(.el-scrollbar__bar.is-vertical) {
width: 11px;
}
颜色的修改
.vol-table ::v-deep(.el-scrollbar__thumb) {
  background-color: #49a3fd;

}

css设置滚动条宽度::-webkit-scrollbar_寒冬里的盛夏。的博客-CSDN博客_css设置滚动条宽度

（2）解析滚动条：明确在哪个页面书写：找到volTable中(相当于一个盒子的名字)，.vol-table::v-deep（class名字）

用scoped属性实现组件样式私有化

改变element-ui某个深层元素 v-deep /deep/和::v-deep 选择器。

css关于/deep/和＞＞＞和::v-deep的解释和用法_Lucky@Dong的博客-CSDN博客_::v-deep

（3）::v-deep的理解

样式穿透，改变原始组件，当功能不满足需求时，希望 scoped 样式中的一个选择器能够作用得“更深用：：deep

伪元素:Vue F05 -- 伪类元素_Toreme的博客-CSDN博客_vue 伪类

伪元素：：两个冒号

（4）另外一种方法：写全局样式.css文件来覆盖整个最初index.css好的样式。