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-scrollbar应用相关推荐

webkit内核浏览器的CSS写法
-webkit-tap-highlight-color: transparent; Mobile上点击链接高亮的时候设置颜色为透明 -webkit-user-select: none; 设置为无法选择 ...
浏览器滚动条 --- 自定义“衣裳”
由于种种原因,浏览器的默认滚动条"衣裳"实在是 (ˉ▽￣-)~~,为了"美",本人结合万维网各大神给的经验和自己的实践,做了此篇总结.若有错误,请在评论里给出, ...
移动端登录页样式错乱_Web前端导致页面css样式混乱的原因问题，我和小伙伴们惊呆了...
## **css常用技巧** 本文都时再工作中用得比较多的Css,还有遇到的一些不长记性的问题,一起来看看这些技巧吧. 1. **实现组件的自动换行排布:** flex-wrap: wrap; 使列表 ...
css常用样式，导致页面css样式混乱的原因，css遇到的问题，我和小伙伴们惊呆了
css常用技巧本文都时再工作中用得比较多的Css,还有遇到的一些不长记性的问题,一起来看看这些技巧吧. 实现组件的自动换行排布: flex-wrap: wrap;使列表排成一行方法一:div{di ...
iscroll.js 触屏手机web-kit浏览器滚动效果代码库
/**!* iScroll v4.1.8 ~ Copyright (c) 2011 Matteo Spinelli, http://cubiq.org* Released under MIT lice ...
WebKit Page对象的分析
Page对象是webkit的核心对象之一,顾名思义,Page数据结构就是描述览器上我们打开的一个页面,这样一个页面包括很多部分,比如菜单控制,拖拽控制,页面显示,以及一些参数设置等.所以webkit中 ...
【-】WebKit Layout (布局)
WebKit 在渲染页面之前,需要确定各个元素的位置.大小,而这个过程就是layout(布局).下面,我们对layout的主要过程进行一番说明. 一.FrameView::layout方法 Frame ...
webkit事件处理
1,概述原文地址:http://blog.csdn.net/awebkit/article/details/8493716 浏览器处理事件一般有两个过程,捕获过程和冒泡过程,这是由addEventL ...
Scrollbar浏览器滚动条样式美化-知识点-案例
知识点罗列简介首先需要介绍一下滚动条的组成部分.滚动条包含 track 和 thumb track是滚动条的基础,其中的 thumb是用户拖动支页面或章节内的滚动还有一件重要的事情要记住,滚动条 ...
修改webkit内核浏览器滚动条样式（修改element-ui table样式）
webkit浏览器css设置滚动条主要有下面7个属性 1. ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 2. ::-webkit-scrollbar-button 滚动条 ...

webkit-scrollbar应用

webkit-scrollbar应用

webkit-scrollbar应用相关推荐

最新文章

热门文章