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


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 的方法重载效果
Aug 07 Javascript
JavaScript DOM 学习第五章 表单简介
Feb 19 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 Javascript
微信小程序 如何保持登录状态
Aug 16 Javascript
原生js实现简单轮播图
Oct 26 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中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
php中如何执行linux命令详解
2018/11/06 PHP
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
Node.js中创建和管理外部进程详解
2014/08/16 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
JavaScript函数表达式详解及实例
2017/05/05 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
在Django中创建动态视图的教程
2015/07/15 Python
python爬取51job中hr的邮箱
2016/05/14 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
浅析Django中关于session的使用
2019/12/30 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
什么是URL
2015/12/13 面试题
室内设计专业学生的自我评价分享
2013/11/27 职场文书
大学生村官心得体会范文
2014/01/04 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
运动会广播稿150字
2014/02/19 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python