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

理由

最初在app.wxss中定义了以下内容【不知道新项目是不是自动生成的，所以这里有隐藏滚动条的想法】

:-web kit-scroll bar { width : 0px；高度： 0px；color: #透明；}什么，宽度和高度都是0，而且是透明的。难怪，好吧，把宽和高改成4px，颜色设置成绿色，以为就可以了，呵呵，太年轻了。

Scroll-viwe仍然没有滚动条。我以为是布局的原因，导致滚动条消失在界面之外。我把宽度和高度设置为20px，想想很有趣，但就是这个愚蠢。再次跑步后发现右侧有很多宽度，但还是没有滚动条。我明白，肯定还有其他设定，果然.

解决

原来除了设置：-webkit-scrollbar之外，还需要设置：-WebKit-scrollbar-track，这是滚动的轨迹，3360-WebKit-scroll bar-thumb，这是滚动条。

因此，完整的设置如下(在app.wxss中，这样所有滚动视图都可用，如果需要单独设置样式，可以在单独页面的wxss中设置)

:-web kit-scroll bar { width : 4px；height: 4pxcolor: # ffffff}/*定义滚动条轨迹中的阴影圆角*/:3360-WebKit-scroll bar-track {-WebKit-box-shadow : inset 0 010 pxrgba(0，0，0.3)；box-shadow:插图0 0 6px rgba(0，0，0，0.1)；border-radius : 10px；背景-color : # FFFFFF；}/*在滑块中定义阴影圆角*/:-WebKit-scroll bar-thumb {边框-半径： 10px-web kit-box-shadow : inset 0 0 10px rgba(0，0，0，0.3)；box-shadow:插图0 0 6px rgba(0，0，0，0.1)；背景-color : # 39b 54 a；}好，看效果

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。