修改滚动条样式

最新推荐文章于 2024-01-11 15:47:54 发布

原创最新推荐文章于 2024-01-11 15:47:54 发布 · 7.7k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用CSS来修改滚动条的样式，使其更加美观。通过设置`::-webkit-scrollbar`和`::-webkit-scrollbar-*`伪元素的样式，可以定制滚动条的宽度、颜色、圆角等属性。示例代码展示了如何创建具有特定颜色和圆角的滚动条。同时，文章还提及了如何使用CSS隐藏滚动条，只需将`display`属性设置为`none`。此外，内容中还涉及到网页元素在不同像素密度屏幕上的显示原理。

修改滚动条样式

如果给父元素固定了宽高，子元素设置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>