css 去除滚动条-微信小程序scroll-view滚动条设置的实现

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

1.直接打开官方demo，仔细阅读官方文档，没有任何解释，这是官方文档一贯的风格。 没有属性可以控制显示/隐藏滚动条，更不用说以这种方式编程了。 所以文档是没有希望的。

2.既然是组件，那么是由css控制的。 我们再看一下css中scroll的介绍。 它具有以下属性： 参考链接。

上图中的位置： -webkit-scrollbar 滚动条的整体部分。

上图中的位置： -webkit-scrollbar-button 滚动条轨道两端的按钮，允许通过点击微调框的位置。

上图中的位置： -webkit-scrollbar-corner 角点，即两个滚动条的交汇处。

上图中的位置：-webkit-scrollbar-thumb 滚动条上方的盒子可以向下和向上连接（或者连接左右css 去除滚动条，取决于是垂直滚动条还是水平滚动条）。

上图中的位置：-webkit-scrollbar-track 滚动条的轨道（thumb安装在里面）。

上图中的位置： -webkit-scrollbar-track-piece 内轨，滚动条的中间部分（去掉）。

但你也可以直接在小程序中观看：

3.以上是普通css中的用法，在小程序中如何使用呢？ 同样，写成wxss。

如：隐藏滑块：

::-webkit-scrollbar
{
width: 0;
height: 0;
color: transparent;
}

或DIY：

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
widwww.cppcns.comth: 6px;
height: 6px;
background-color: #ffffff;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: yellow;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 10px rgbzgIBlka(0,0,0,.3);
background-color: #ff5500;
}

上述写法对于android和开发工具来说效果是一样的css 去除滚动条，如下图：

4、我以为大功告成，就拿出小6扫了预览，笑了，心里MMP。 呵呵！ 继续尝试！

找了好久终于知道为什么垂直滚动条被隐藏了，而且没有办法去掉！ 看这里。

原文内容是：

算了，别乱搞ios了，想要疗效那就定制吧！

最近在优化小程序，发现scroll-view有两个问题

1、IOS手机下scroll-view上拉加载时会卡住

临时解决办法（设置高度为100%，问题：设置后无法触发上拉触底）：

2.IOS手机下会有scroll-view，点击不会触发navigator-hover中的css

没有找到什么好的解决办法，所以只将scroll-view替换为view

关于Momo小程序scroll-view滚动条的设置与实现的这篇文章就到此结束了。 更多关于小程序滚动视图滚动条的内容，请搜索我们之前的文章或者继续浏览下面的相关文章。 希望大家以后多多支持我们！

本文标题：微信小程序scroll-view滚动条设置的实现