修改滚动条样式

如果给父元素固定了宽高，子元素设置overflow:auto时，就会出现滚动条，而浏览器默认的滚动条样式并不是很美观，如下图所示

为了让显示的滚动条更好看些，可以对滚动条样式进行设置，关键css代码如下：

    // 滚动条
    .box-card::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    .box-card::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #E5E5E5;
    }
    .box-card::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 10px;
        background: #ffffff;
    }

但如果要隐藏滚动条，也可以设置以下样式：

    /*不显示滚动条*/
    .box-card::-webkit-scrollbar {
        display: none;
    }

通过设置滚动样式后，显示的效果如下：

完整代码如下：

<!--
    @author: itmacy
    @desc: 滚动条样式
-->
<template>

    <div class="div">
        <div class="box-card">
            例如，如果我们设计一个按钮元素，大小是200x50dp，那么它在160ppi的屏幕上显示为200x50dp，
            在320ppi的屏幕上显示为400x100px，即原始资源的2倍。
            在某些屏幕每英寸的像素要比其他屏幕多，但设计资源却不会在像素密度高的屏幕上显得更小，
            这是因为在这些屏幕上会以原始尺寸的2倍，3倍，4倍进行渲染。
            这样的机制可以确保所有设计资源可以在不同密度和设备之间保持同样大小。
            例如，iPhone XS Max的屏幕尺寸是414x896，但这不是像素尺寸而是点的数量，
            以像素为单位时是1242x2688px。考虑到这一点，在设计iPhone XS Max时，
            我会将在414x896点下设计，然后交付@3x的设计资源。
        </div>
    </div>
</template>

<script>
  export default {
    name: 'Scrollbar'
  }
</script>

<style scoped lang="scss">
    .div{
        height: 300px;
        width: 200px;
        border: 1px solid #E5E5E5;
    }
    .box-card {
        height: 100%;
        overflow: auto;
    }
    /*不显示滚动条*/
    /*.box-card::-webkit-scrollbar {*/
    /*    display: none;*/
    /*}*/
    // 滚动条
    .box-card::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    .box-card::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #E5E5E5;
    }
    .box-card::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 10px;
        background: #ffffff;
    }
</style>

__EOF__

本文作者：itmacy
本文链接：https://www.cnblogs.com/itmacy/p/16284762.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！