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


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 相关文章推荐
用javascript实现分割提取页面所需内容
May 09 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 Javascript
深入分析js中的constructor和prototype
Apr 07 Javascript
原生js写的放大镜效果
Aug 22 Javascript
jQuery中addClass()方法用法实例
Jan 05 Javascript
动态加载JavaScript文件的两种方法
Apr 22 Javascript
js友好的时间返回函数
Aug 24 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 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
自己动手做一个SQL解释器
2006/10/09 PHP
PHP 开源框架22个简单简介
2009/08/24 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
JavaScript的漂亮的代码片段
2013/06/05 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
深入理解Promise.all
2018/08/08 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
vue 使用class创建和清除水印的示例代码
2020/12/25 Vue.js
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
Python3实现的字典遍历操作详解
2018/04/18 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
法雷奥SQA(electric)面试问题
2016/01/23 面试题
社区党员先进事迹
2014/01/22 职场文书
平安工地建设方案
2014/05/06 职场文书
村级个人对照检查材料
2014/08/22 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS