vue div 滚动条,vue自定义滚动条组件
这篇文章主要介绍了某视频剪辑软件修改滚动条样式，首先要知道，修改滚动条样式，利用伪元素-网络工具包-滚动条。下面来看看文章内容的具体实现吧
目录
首先要知道，修改滚动条样式，利用伪元素-网络工具包-滚动条。
注意，-网络工具包-滚动条仅仅支持网络工具包的浏览器（例如谷歌铬合金，苹果野生动物园).
其次还需要了解滚动条的一些组成：
:-网络工具包-滚动条滚动条整体部分，可以设置宽度等
:-网络工具包-滚动条-缩略图滚动条里面的滑块
:-网络工具包-滚动条-按钮滚动条轨道两端的按钮，允许通过点击以微调滑块的位置
:-网络工具包-滚动条-跟踪滚动条的轨道（里面装有拇指)
:-网络工具包-滚动条-跟踪件滚动条没有滑块的轨道部分
:-网络工具包-滚动条-角落当同时有垂直滚动条和水平滚动条时的交汇处
:-webkit-resizer某些元素的角落部分（如文本区域的可拖动按钮)
对此有了一些了解之后就可以上手滚动条样式的修改了。
代码实现：
ul class=导航-标签-滚动
li v-for=(item，index)in tabs :key= index class= nav-item-scroll {
！-{项目。text } }/李
/ul
v-文本区域概述v-model= text style= width:200 px；边距：16pxclass=text/v-textarea
数据：()=({
选项卡：[
{值：4001,文本：贷款日志，代码：贷款_日志 },
{值：4002,文本：文档日志，代码： DOCUMENT_LOG }，
{值：4003,文本：便笺日志，代码：注释日志 }，
{值：4004,文本：操作日志，代码： OPERATION_LOG }，
{值：4005,文本：支付日志，代码：支付日志 }，
{值：4006,文本：维护日志，代码：维护日志 }，
{值：4007,文本：事务日志，代码：事务日志 },
{值：4008,文本：收集日志，代码：收集日志 },
{值：4001,文本：贷款日志，代码：贷款_日志 },
{值：4002,文本：文档日志，代码： DOCUMENT_LOG }，
{值：4003,文本：便笺日志，代码：注释日志 }，
{值：4004,文本：操作日志，代码： OPERATION_LOG }，
{值：4005,文本：支付日志，代码：支付日志 }，
{值：4006,文本：维护日志，代码：维护日志 }，
{值：4007,文本：事务日志，代码：事务日志 },
{值：4008,文本：收集日志，代码：收集日志 },
{值：4001,文本：贷款日志，代码：贷款_日志 },
{值：4002,文本：文档日志，代码： DOCUMENT_LOG }，
{值：4003,文本：便笺日志，代码：注释日志 }，
{值：4004,文本：操作日志，代码： OPERATION_LOG }，
{值：4005,文本：支付日志，代码：支付日志 }，
{值：4006,文本：维护日志，代码：维护日志 }，
{值：4007,文本：事务日志，代码：事务日志 },
{值：4008,文本："收集日志",代码："收集日志"}
],
文本：""
}),
样式lang=scss 范围。导航-标签-滚动{
高度：100像素
列表样式：无；
边距：0px
填充：16px 0；
溢出-x:自动；
显示：内嵌-块；
空白：nowrap
宽度：100%;
背景：# F9FAFD
}。导航项目滚动{
背景：# e 5 f 0 ff
颜色：# 24252E
字体大小：12px
字体粗细：400;
行高：16px
填充：8像素8像素180像素
文本对齐：居中；
显示：内嵌；
保证金：0 4px 0
边框半径：16px
}。导航-标签-滚动：-网络工具包-滚动条{
宽度：20px
高度：10px
}。导航-标签-滚动：-网络工具包-滚动条-缩略图{
边框半径：5px
背景：红色；
}。导航-标签-滚动：-网络工具包-滚动条-按钮{
宽度：10px
边界半径：50%;
背景：黑色；
}。导航-标签-滚动：-网络工具包-滚动条-跟踪{
方框阴影：插图0 0 2px # 333
边框半径：5px
背景：蓝色；
}。导航-标签-滚动：-网络工具包-滚动条-角落{
背景：春绿
}
/*。导航-标签-滚动：-网络工具包-滚动条-跟踪-件{
方框阴影：插图0 0 2px # 333
边框半径：5px
背景：梅子；
}
*/
/风格
风格。文字。文本区域：-WebKit-resizer {
背景：粉色；
}
/风格
默认的样式：
修改后的样式：
到此这篇关于某视频剪辑软件修改滚动条样式的方法的文章就介绍到这了，更多相关某视频剪辑软件修改滚动条样式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。