webkit

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>

webkit

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>