隐藏滚动条

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. 【leetcode】212. Word Search II

    Given an m x n board of characters and a list of strings words, return all words on the board. Each ...

  2. Gradle安装与配置

    一.Gradle安装 1.Gradle安装 (1)先安装JDK/JRE (2)Gradle下载官网 Gradle官网 (3)解压安装包到想安装到的目录.如D:\java\gradle-5.2.1 (4 ...

  3. Copy constructor vs assignment operator in C++

    Difficulty Level: Rookie Consider the following C++ program. 1 #include<iostream> 2 #include&l ...

  4. Linux学习 - 文件特殊权限

    一.SUID权限(只针对文件) 只有可执行的二进制程序才能设定SUID权限 命令执行者要对该程序拥有x(执行)权限 1 拥有SUID的文件 /usr/bin/passwd 2 功能: 命令执行者(其他 ...

  5. Oracle bulk collect into 的几种用法

    bulk collect 和 forall 联合应用写起来显得有些啰嗦,不过为了速度,多写两句又何妨 建立两个临时表 create table T_TEST ( TESTID NUMBER(19) n ...

  6. Linux:sqlldr命令

    第一步:写一个 ctl格式的控制文件 CTL 控制文件的内容 : load data --1. 控制文件标识 infile 'xxx.txt' --2. 要导入的数据文件名 insert into t ...

  7. jQuery遍历的几种方式

    一.jQuery对象遍历 1 <script type="text/javascript" src="js/jquery-3.4.1.js">< ...

  8. Mysql B-Tree和B+Tree索引

    Mysql B-Tree和B+树索引 Mysql加快数据查找使用B-Tree数据结构存储索引数据,InnoDB存储引擎实际使用B+Tree.下面首先介绍下B-Tree和B+Tree的区别: 一.B树和 ...

  9. NGNIX 开启socket分发的使用配置

    worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/err ...

  10. NSData NSDate NSString NSArray NSDictionary 相互转化

    //    NSData  NSDate NSString NSArray NSDictionary json NSString *string = @"hello word"; ...