隐藏滚动条

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隐藏滚动条 自定义滚动条的更多相关文章

  1. uniapp,微信小程序中使用 MQTT

    最近在uniapp打包成微信小程序的项目中第一次用到了MQTT.使用比较简单,但是还是遇到了一些问题.在此记录一下. 官方文档:MQTT Github 官方MQTT测试工具:MQTTX.测试工具使用说 ...

  2. 微信小程序中使用iconfont/font-awesome等自定义字体图标

    小程序不能识别外部字体文件,但是转换成Base64就可以使用字体图标了. 以阿里巴巴的iconfont为例 1.下载图标 先去官网下载喜欢的图标==> 下载解压后的文件夹==> 2.在线转 ...

  3. 微信小程序中显示与隐藏(hidden)

    1.wx.wxml页面部分 <view bindtap='click'>点击</view> //这是显示隐藏的部分 <view hidden="{{hidden ...

  4. 微信小程序中如何实现分页下拉加载?(附源码)

    转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...

  5. 使用uni-app开发微信小程序

    uni-app 开发微信小程序 前言 9月份,开始开发微信小程序,也曾调研过wepy/mpvue,考虑到后期跨端的需求,最终选择使用了uni-app,本文主要介绍如何使用uni-app搭建小程序项目, ...

  6. 使用uView UI+UniApp开发微信小程序

    在前面随笔的介绍中,我们已经为各种框架,已经准备了Web API.Winform端.Bootstrap-Vue的公司动态网站前端.Vue&Element的管理前端等内容,基本都是基于Web A ...

  7. 使用uView UI+UniApp开发微信小程序--微信授权绑定和一键登录系统

    在前面随笔<使用uView UI+UniApp开发微信小程序>和<使用uView UI+UniApp开发微信小程序--判断用户是否登录并跳转>介绍了微信小程序的常规登录处理和验 ...

  8. 在微信小程序中使用富文本转化插件wxParse

    在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...

  9. 微信小程序中的组件使用1

    不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...

随机推荐

  1. accustom

    近/反义词: acclimatize, familiarize, habituate, inure, get used to, orient; alienate, estrange, wean New ...

  2. Zookeeper【概述、安装、原理、使用】

    目录 第1章 Zookeeper入门 1.1 概述 1.2 特点 1.3 数据结构 1.4应用场景 第2章 Zookeep安装 2.1 下载地址 2.2 本地模式安装 1. 安装前准备 2. 配置修改 ...

  3. 【bfs】洛谷 P1443 马的遍历

    题目:P1443 马的遍历 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 记录一下第一道ac的bfs,原理是利用队列queue记录下一层的所有点,然后一层一层遍历: 其中: 1.p ...

  4. Jedis操作五种不同的类型的数据

    package cn.hope.jedis.utils;import redis.clients.jedis.Jedis;import redis.clients.jedis.JedisPool;im ...

  5. 【Python】文本包jieba使用

    看了一个教程:https://www.cnblogs.com/wkfvawl/p/9487165.html 有些不懂的地方自己查阅了一下 键值的添加,获得文件中相同字符出现的次数, counts = ...

  6. mysqlslap基准测试

    目录 简介 二.例子 三.其它选项 简介 mysqlslap是mysql自带的基准测试工具 优点:查询数据,语法简单,灵活容易使用.该工具可以模拟多个客户端同时并发的向服务器发出查询更新,给出了性能测 ...

  7. mysql索引最左匹配的理解(转载于知乎回答)

    作者:沈杰链接:https://www.zhihu.com/question/36996520/answer/93256153来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...

  8. [HarekazeCTF2019]baby_rop

    看到名字就想到了用rop来做这道题 老样子chescksec和file一下 可以看到是64位的程序开启了nx保护,把程序放到idax64里 可以看到有system和/bin/sh,/bin/sh无法跟 ...

  9. [BUUCTF]PWN——[ZJCTF 2019]Login

    [ZJCTF 2019]Login 附件 步骤: 例行检查,64位程序,开启了canary和nx保护 2. 试运行一下程序 3. 64位ida载入,检索字符串,在程序里找到了用户名admin和密码2j ...

  10. 用 shell 脚本做自动化测试

    前言 项目中有一个功能,需要监控本地文件系统的变更,例如文件的增.删.改名.文件数据变动等等.之前只在 windows 上有实现,采用的是 iocp + ReadDirectoryChanges 方案 ...