uniapp以及微信小程序中scroll-view隐藏滚动条 自定义滚动条
隐藏滚动条
1、全局隐藏滚动条,在app.vue中
::-webkit-scrollbar{
display: none;
}
2、局部隐藏藏滚动条
样式没有使用scoped属性时, 否则无效。
.uni-scroll-view::-webkit-scrollbar {
display: none
}
使用scoped属性时, 就要使用/deep/穿透。
/deep/.uni-scroll-view::-webkit-scrollbar {
display: none
}
自定义滚动条
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
width: 16upx!important;
height: 16upx!important;
background-color: #F5F5F5;
} /*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
// -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #fff;
} /*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
滚动条详解
上图位置<1>:-webkit-scrollbar 滚动条整体部分。
上图位置<2>:-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。
上图位置<3>:-webkit-scrollbar-corner 边角,即两个滚动条的交汇处。
上图位置<4>:-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)。
上图位置<5>:-webkit-scrollbar-track 滚动条的轨道(里面装有thumb)。
上图位置<6>:-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)。
参考链接:https://www.cnblogs.com/lizhao123/p/12539596.html
参考链接:https://blog.csdn.net/qq_32067045/article/details/79958540
uniapp以及微信小程序中scroll-view隐藏滚动条 自定义滚动条的更多相关文章
- uniapp,微信小程序中使用 MQTT
最近在uniapp打包成微信小程序的项目中第一次用到了MQTT.使用比较简单,但是还是遇到了一些问题.在此记录一下. 官方文档:MQTT Github 官方MQTT测试工具:MQTTX.测试工具使用说 ...
- 微信小程序中使用iconfont/font-awesome等自定义字体图标
小程序不能识别外部字体文件,但是转换成Base64就可以使用字体图标了. 以阿里巴巴的iconfont为例 1.下载图标 先去官网下载喜欢的图标==> 下载解压后的文件夹==> 2.在线转 ...
- 微信小程序中显示与隐藏(hidden)
1.wx.wxml页面部分 <view bindtap='click'>点击</view> //这是显示隐藏的部分 <view hidden="{{hidden ...
- 微信小程序中如何实现分页下拉加载?(附源码)
转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...
- 使用uni-app开发微信小程序
uni-app 开发微信小程序 前言 9月份,开始开发微信小程序,也曾调研过wepy/mpvue,考虑到后期跨端的需求,最终选择使用了uni-app,本文主要介绍如何使用uni-app搭建小程序项目, ...
- 使用uView UI+UniApp开发微信小程序
在前面随笔的介绍中,我们已经为各种框架,已经准备了Web API.Winform端.Bootstrap-Vue的公司动态网站前端.Vue&Element的管理前端等内容,基本都是基于Web A ...
- 使用uView UI+UniApp开发微信小程序--微信授权绑定和一键登录系统
在前面随笔<使用uView UI+UniApp开发微信小程序>和<使用uView UI+UniApp开发微信小程序--判断用户是否登录并跳转>介绍了微信小程序的常规登录处理和验 ...
- 在微信小程序中使用富文本转化插件wxParse
在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...
- 微信小程序中的组件使用1
不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...
随机推荐
- Linux基础命令---echo打印内容到标准输出
echo echo指令可以输出内容到标准输出,以空白分割字符串,并且后面增加换行. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.Fedora. 1.语法 ec ...
- Handler与多线程
1.Handler介绍 在Android开发中,我们常会使用单独的线程来完成某些操作,比如用一个线程来完成从网络上下的图片,然后显示在一个ImageView上,在多线程操作时,Android中必须保证 ...
- Spring Cloud集成RabbitMQ的使用
同步 or 异步 前言:我们现在有一个用微服务架构模式开发的系统,系统里有一个商品服务和订单服务,且它们都是同步通信的. 目前我们商品服务和订单服务之间的通信方式是同步的,当业务扩大之后,如果还继续使 ...
- ES6——>let,箭头函数,this指向小记
let let允许你声明一个作用域被限制在块级中的变量.语句或者表达式. 还是那个经典的问题:创建5个li,点击不同的li能够打印出当前li的序号. 如果在for循环中使用**var**来声明变量i的 ...
- Js判断数组中是否存在某个元素
Js判断数组中是否存在某个元素 方法一:indexOf(item,start); Item:要查找的值:start:可选的整数参数,缺省则从起始位子开始查找. indexOf();返回元素在数组中的位 ...
- 通过SSE(Server-Send Event)实现服务器主动向浏览器端推送消息
一.SSE介绍 1.EventSource 对象 SSE 的客户端 API 部署在EventSource对象上.下面的代码可以检测浏览器是否支持 SSE. if ('EventSource' in w ...
- EntityFramework Core (一)记一次 .net core 使用 ef 6
使用传统的sql去操作数据库虽然思路更加清晰,对每一步数据库读写操作都能监控到,但是对大数据存储,或存储规则复杂的程序就需要编写大量的SQL语句且不易维护..orm大大方便了复杂的数据库读写操作, 让 ...
- Jenkins优化
目录 一.修改 JVM 的内存配置 二.修改jenkins 主目录 一.修改 JVM 的内存配置 Jenkins 启动方式有两种方式,一种是以 Jdk Jar 方式运行,一种是将 War 包放在 To ...
- LR常见报错
转:https://blog.csdn.net/yoyo_sunny/article/details/43406503
- Google Earth Engine 批量点击RUN任务,批量取消正在上传的任务
本文内容参考自: https://blog.csdn.net/qq_21567935/article/details/89061114 https://blog.csdn.net/qq_2156793 ...