您正在使用IPV4(35.153.166.111)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

[公益] 节省一分零钱 献出一份爱心 温暖世间真情       【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年74元      
虚位以待
2021年 冬至节 14
2021年 圣诞节 18
2022年 元 旦 25
2022年 春 节 56
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    vue修改滚动条样式的方法
    内容摘要: 首先要知道,修改滚动条样式,利用伪元素-webkit-scrollbar。注意,::-webkit-scrollbar仅仅支持WebKit的浏览器(例如谷歌Chrome、苹果Safari)。其次还需要了解滚动条的一些组成:::-webkit-scrollbar滚动条整体部分,可以设置宽度等::-webkit-scrollbar-thumb滚动条里面的滑块::......
    首先要知道,修改滚动条样式,利用伪元素-webkit-scrollbar。

    注意,::-webkit-scrollbar仅仅支持WebKit的浏览器(例如谷歌Chrome、苹果Safari)。

    其次还需要了解滚动条的一些组成:

    ::-webkit-scrollbar滚动条整体部分,可以设置宽度等

    ::-webkit-scrollbar-thumb滚动条里面的滑块

    ::-webkit-scrollbar-button滚动条轨道两端的按钮,允许通过点击以微调滑块的位置

    ::-webkit-scrollbar-track滚动条的轨道(里面装有thumb)

    ::-webkit-scrollbar-track-piece滚动条没有滑块的轨道部分

    ::-webkit-scrollbar-corner当同时有垂直滚动条和水平滚动条时的交汇处

    ::-webkit-resizer某些元素的corner部分(如textarea的可拖动按钮)

    对此有了一些了解之后就可以上手滚动条样式的修改了。

    代码实现:

    <ulclass="nav-tabs-scroll">

    <liv-for="(item,index)intabs":key="index"class="nav-item-scroll">{

    <!---->{item.text}}</li>

    </ul>

    <v-textareaoutlinedv-model="text"style="width:200px;margin:16px;"class="text"></v-textarea>

    data:()=>({

    tabs:[

    {value:4001,text:'LoanLog',code:'LOAN_LOG'},

    {value:4002,text:'DocumentLog',code:'DOCUMENT_LOG'},

    {value:4003,text:'NoteLog',code:'NOTE_LOG'},

    {value:4004,text:'OperationLog',code:'OPERATION_LOG'},

    {value:4005,text:'PaymentLog',code:'PAYMENT_LOG'},

    {value:4006,text:'MaintenanceLog',code:'MAINTENANCE_LOG'},

    {value:4007,text:'TransactionLog',code:'TRANSACTION_LOG'},

    {value:4008,text:'CollectionLog',code:'COLLECTION_LOG'},

    {value:4001,text:'LoanLog',code:'LOAN_LOG'},

    {value:4002,text:'DocumentLog',code:'DOCUMENT_LOG'},

    {value:4003,text:'NoteLog',code:'NOTE_LOG'},

    {value:4004,text:'OperationLog',code:'OPERATION_LOG'},

    {value:4005,text:'PaymentLog',code:'PAYMENT_LOG'},

    {value:4006,text:'MaintenanceLog',code:'MAINTENANCE_LOG'},

    {value:4007,text:'TransactionLog',code:'TRANSACTION_LOG'},

    {value:4008,text:'CollectionLog',code:'COLLECTION_LOG'},

    {value:4001,text:'LoanLog',code:'LOAN_LOG'},

    {value:4002,text:'DocumentLog',code:'DOCUMENT_LOG'},

    {value:4003,text:'NoteLog',code:'NOTE_LOG'},

    {value:4004,text:'OperationLog',code:'OPERATION_LOG'},

    {value:4005,text:'PaymentLog',code:'PAYMENT_LOG'},

    {value:4006,text:'MaintenanceLog',code:'MAINTENANCE_LOG'},

    {value:4007,text:'TransactionLog',code:'TRANSACTION_LOG'},

    {value:4008,text:'CollectionLog',code:'COLLECTION_LOG'}

    ],

    text:''

    }),

    <stylelang="scss"scoped>

    .nav-tabs-scroll{

    height:100px;

    list-style:none;

    margin:0px;

    padding:16px0;

    overflow-x:auto;

    display:inline-block;

    white-space:nowrap;

    width:100%;

    background:#F9FAFD;

    }

    .nav-item-scroll{

    background:#E5F0FF;

    color:#24252E;

    font-size:12px;

    font-weight:400;

    line-height:16px;

    padding:8px8px180px;

    text-align:center;

    display:inline;

    margin:04px0;

    border-radius:16px;

    }

    .nav-tabs-scroll::-webkit-scrollbar{

    width:20px;

    height:10px;

    }

    .nav-tabs-scroll::-webkit-scrollbar-thumb{

    border-radius:5px;

    background:red;

    }

    .nav-tabs-scroll::-webkit-scrollbar-button{

    width:10px;

    border-radius:50%;

    background:black;

    }

    .nav-tabs-scroll::-webkit-scrollbar-track{

    box-shadow:inset002px#333;

    border-radius:5px;

    background:blue;

    }

    .nav-tabs-scroll::-webkit-scrollbar-corner{

    background:springgreen;

    }

    /*

    .nav-tabs-scroll::-webkit-scrollbar-track-piece{

    box-shadow:inset002px#333;

    border-radius:5px;

    background:plum;

    }

    */

    </style>

    <style>

    .text.v-textareatextarea::-webkit-resizer{

    background:pink;

    }

    </style>

    上一篇:jQuery判断网页是否已经滚动到浏览器底部的实现方 下一篇:利用js实现简单开关灯代码
    发布日期:2021/11/20
    手机扫二维码直达本页
    发布时间:14:48:43
    点击:166
    录入:齐天大圣
    相关文章
    Baidu
    YiJiaCMS 6.0.9.10888 Build 21.11.30(MSSQL) 闽ICP备05000814号-1
    本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
    ©2000-2021