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


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 相关文章推荐
番茄的表单验证类代码修改版
Jul 18 Javascript
javascript 表单规则集合对象
Jul 21 Javascript
Dojo 学习要点
Sep 03 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
React组件的三种写法总结
Jan 12 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 Javascript
微信小程序的mpvue框架快速上手指南
May 15 Javascript
JS实现基本的网页计算器功能示例
Jan 16 Javascript
详解javascript void(0)
Jul 13 Javascript
vuex的数据渲染与修改浅析
Nov 26 Vue.js
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实现ODBC数据分页显示一例
2006/10/09 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
js正则表达式验证表单【完整版】
2017/03/06 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
vue轮播图插件vue-concise-slider的使用
2018/03/13 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
python基于物品协同过滤算法实现代码
2018/05/31 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
python中time tzset()函数实例用法
2021/02/18 Python
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
计算机毕业大学生推荐信
2013/12/01 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
犯错检讨书
2014/02/21 职场文书
个人批评与自我批评总结
2014/10/17 职场文书
倡议书作文
2015/01/19 职场文书
2015年安全月活动总结
2015/03/26 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书