时间:2021-05-18
原因
原来在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;}好了,看看效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
AndroidListView滚动条的设置详解1.滚动条的属性android:scrollbarAlwaysDrawHorizontalTrack设置是否始终显
细心的粉丝会发现,有的淘宝直播间有滚动条,有的直播间没有滚动条。直播间滚动条也是轮播条,更好的展示信息内容。那么淘宝直播滚动条轮播条具体应该如何设置?设置时有什
如何隐藏滚动条,同时仍然可以在任何元素上滚动?首先,如果需要隐藏滚动条并在内容溢出时显示滚动条,只需要设置overflow:auto样式即可。想要完全隐藏滚动条
一、实现对ScrollViewer样式的自定义主要包括:1、滚动条宽度设置2、滚动条颜色3、滚动条圆角4、滚动条拉动时的效果mouseover二、实现效果:三、
一:scroll-view隐藏滚动条在书写网页的时候,往往会为了页面的美观,而选择去掉滚动区域默认的滚动条,而在这里,就是为小程序去掉滚动条的其中的一种方法:s