温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue怎么修改滚动条样式

发布时间:2021-11-20 09:31:45 来源:亿速云 阅读:220 作者:iii 栏目:开发技术

本篇内容主要讲解“vue怎么修改滚动条样式”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue怎么修改滚动条样式”吧!

    首先要知道,修改滚动条样式,利用伪元素-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的可拖动按钮)

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

    代码实现:

    <ul class="nav-tabs-scroll">
      <li v-for="(item,index) in tabs" :key="index" class="nav-item-scroll">{
    <!-- -->{item.text}}</li>
    </ul>
    <v-textarea outlined v-model="text"  class="text"></v-textarea>
    data: () => ({
          tabs: [
            { value: 4001, text: 'Loan Log', code: 'LOAN_LOG' },
            { value: 4002, text: 'Document Log', code: 'DOCUMENT_LOG' },
            { value: 4003, text: 'Note Log', code: 'NOTE_LOG' },
            { value: 4004, text: 'Operation Log', code: 'OPERATION_LOG' },
            { value: 4005, text: 'Payment Log', code: 'PAYMENT_LOG' },
            { value: 4006, text: 'Maintenance Log', code: 'MAINTENANCE_LOG' },
            { value: 4007, text: 'Transaction Log', code: 'TRANSACTION_LOG' },
            { value: 4008, text: 'Collection Log', code: 'COLLECTION_LOG' },
            { value: 4001, text: 'Loan Log', code: 'LOAN_LOG' },
            { value: 4002, text: 'Document Log', code: 'DOCUMENT_LOG' },
            { value: 4003, text: 'Note Log', code: 'NOTE_LOG' },
            { value: 4004, text: 'Operation Log', code: 'OPERATION_LOG' },
            { value: 4005, text: 'Payment Log', code: 'PAYMENT_LOG' },
            { value: 4006, text: 'Maintenance Log', code: 'MAINTENANCE_LOG' },
            { value: 4007, text: 'Transaction Log', code: 'TRANSACTION_LOG' },
            { value: 4008, text: 'Collection Log', code: 'COLLECTION_LOG' },
            { value: 4001, text: 'Loan Log', code: 'LOAN_LOG' },
            { value: 4002, text: 'Document Log', code: 'DOCUMENT_LOG' },
            { value: 4003, text: 'Note Log', code: 'NOTE_LOG' },
            { value: 4004, text: 'Operation Log', code: 'OPERATION_LOG' },
            { value: 4005, text: 'Payment Log', code: 'PAYMENT_LOG' },
            { value: 4006, text: 'Maintenance Log', code: 'MAINTENANCE_LOG' },
            { value: 4007, text: 'Transaction Log', code: 'TRANSACTION_LOG' },
            { value: 4008, text: 'Collection Log', code: 'COLLECTION_LOG' }
          ],
          text: ''
        }),
    <style lang="scss" scoped>
      .nav-tabs-scroll {
        height: 100px;
        list-style: none;
        margin: 0px;
        padding: 16px 0;
        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: 8px 8px 180px;
        text-align: center;
        display: inline;
        margin: 0 4px 0;
        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: inset 0 0 2px #333;
        border-radius: 5px;
        background: blue;
      }
      .nav-tabs-scroll::-webkit-scrollbar-corner {
        background: springgreen;
      }
      /*
      .nav-tabs-scroll::-webkit-scrollbar-track-piece {
        box-shadow: inset 0 0 2px #333;
        border-radius: 5px;
        background: plum;
      }
      */
    </style>
    <style>
      .text.v-textarea textarea::-webkit-resizer {
        background: pink;
      }
    </style>

    默认的样式:

    vue怎么修改滚动条样式

    修改后的样式:

    vue怎么修改滚动条样式

    到此,相信大家对“vue怎么修改滚动条样式”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    vue
    AI