webkit-scrollbar应用

最新推荐文章于 2024-02-24 09:52:08 发布

qq_45944328

最新推荐文章于 2024-02-24 09:52:08 发布

阅读量1.3k

点赞数

文章标签： webkit css css3

本文链接：https://blog.csdn.net/qq_45944328/article/details/125613473

版权

webkit-scrollbar应用

// An highlighted block
<template>
    <div class="textArea">
        <div class="title">多行文本</div>
        <el-input type="textarea" :rows="7" placeholder="请输入内容" v-model="textarea"> </el-input>
    </div>
</template>

<script>
export default {
    data() {
        return {
            textarea: ''
        }
    }
}
</script>

<style lang="scss" scoped>
.textArea {
    .title {
        font-size: 14px;
        opacity: 0.7;
        color: #3b4155;
        line-height: 20px;
        margin-bottom: 4px;
    }
    ::v-deep .el-textarea__inner {
        border-radius: 2px;
        font-size: 14px;
        color: #3b4155;
        line-height: 20px;
        padding: 6px 8px 6px 8px;
        height: 160px;
        // @include scrollbar(red, blue);
        // 整个滚动条的样式
        &::-webkit-scrollbar {
            width: 40px;
            background-color: red;
        }
        // 滚动条轨道
        &::-webkit-scrollbar-track {
            width: 40px;
            border-radius: 40px;
            background-color: blue;
        }
        // 滚动条滑块
        &::-webkit-scrollbar-thumb {
            border: 5px solid #000;
            border-radius: 40px;
            background-color: yellow;
        }
    }
}
</style>