微信小程序设置滚动条过程详解


Posted in Javascript onJuly 25, 2019

原因

原来在app.wxss中定义了如下的内容【不知道是不是新建项目自动生成的,这里也就提供了隐藏滚动条的思路啦】

::-webkit-scrollbar {
 width: 0px;
 height: 0px;
 color:#transparent;
}

what, 宽高为0,而且还是透明的,难怪,好吧,修改宽高4px,color设置为green,以为可以了,呵呵,太年轻。

scroll-viwe依然没有滚动条,以为是布局原因,导致滚动条消失在界面外,我将宽高设为20px,想想也是搞笑,设这么宽,但是,正是这种傻劲,再运行,发现右边宽出了好多,然而还是没有滚动条,懂了,肯定还有其他设置,果不其然……

解决

一通捣腾,原来,除了设置::-webkit-scrollbar,还需要设置::-webkit-scrollbar-track,这是设置滚动的轨道,::-webkit-scrollbar-thumb,这是设置滚动条的。

所以完整的设置如下(在app.wxss中,这样所有的scroll-view都有了,如果需要单独设置样式,可在单独page的wxss中设置)

::-webkit-scrollbar {
 width: 4px;
 height: 4px;
 color:#ffffff;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
 border-radius: 10px;
 background-color:#FFFFFF;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
 border-radius: 10px;
 -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
 background-color:#39b54a;
}

好了,看看效果

微信小程序设置滚动条过程详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js获取页面传来参数的方法
Sep 06 Javascript
jQuery中:reset选择器用法实例
Jan 04 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 Javascript
简单谈谈json跨域
Mar 13 Javascript
基于JavaScript实现五子棋游戏
Aug 26 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 Javascript
基于JavaScript实现省市联动效果
Jun 22 Javascript
vuejs移动端实现div拖拽移动
Jul 25 #Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 #Javascript
vue实现一拉到底的滑动验证
Jul 25 #Javascript
微信小程序实现图片选择并预览功能
Jul 25 #Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 #Javascript
微信小程序绘制图片发送朋友圈
Jul 25 #Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 #Javascript
You might like
删除数组元素实用的PHP数组函数
2008/08/18 PHP
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
php实现读取和写入tab分割的文件
2015/06/01 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
JS画5角星方法介绍
2013/09/17 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
JS实现多选框的操作
2020/06/24 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
python提取字典key列表的方法
2015/07/11 Python
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
python matplotlib中文显示参数设置解析
2017/12/15 Python
python3多线程知识点总结
2019/09/26 Python
python定义类的简单用法
2020/07/24 Python
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
安全检查与奖惩制度
2014/01/23 职场文书
儿童生日会策划方案
2014/05/15 职场文书
中层干部培训方案
2014/06/16 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
综合测评自我评价
2015/03/06 职场文书
学生通报表扬范文
2015/05/04 职场文书
优秀范文:读《红岩》有感3篇
2019/10/14 职场文书
python使用glob检索文件的操作
2021/05/20 Python
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
如何利用Python实现一个论文降重工具
2021/07/09 Python
Python基本的内置数据类型及使用方法
2022/04/13 Python