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


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 QueryString解析类代码
Jan 17 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
jQuery版本升级踩坑大全
Jan 12 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 Javascript
JavaScript计算正方形面积
Nov 26 Javascript
原生js实现购物车
Sep 23 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获取MySql新增记录ID值的3种方法
2014/06/24 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
JavaScript实现禁止后退的方法
2006/12/27 Javascript
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
Python使用剪切板的方法
2017/06/06 Python
Python中Threading用法详解
2017/12/27 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
外贸业务员求职信范文
2013/12/12 职场文书
女娲补天教学反思
2014/02/05 职场文书
党性教育心得体会
2014/09/03 职场文书
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
2014年党支部工作总结
2014/11/13 职场文书
争先创优个人总结
2015/03/04 职场文书
赤壁观后感(2)
2015/06/15 职场文书