这篇文章主要介绍了小程序如何实现scroll-view安卓机隐藏横向滚动条，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
一、实践踩坑
项目使用mpvue开发
1.使用flex布局
计算
安全
数据库
网络和加速
企业服务
// html大概长这样
<div class="worth-wraper">
<scroll-view scroll-x="true" scroll-left="0">
<div class="worth-list">
<div class="worth-item-img">
<img src="/static/images/index/brand1.png" alt="">
</div>
<div class="worth-item-img">
<img src="/static/images/index/brand2.png" alt="">
</div>
<div class="worth-item-img">
<img src="/static/images/index/brand3.png" alt="">
</div>
<div class="worth-item-img">
<img src="/static/images/index/brand4.png" alt="">
</div>
</div>
</scroll-view>
</div>// css相应就大概长这样
.worth-wraper{
margin-top: 60rpx;
height: 560rpx;
box-sizing: border-box;
display: flex;
width: 750rpx;
overflow: hidden;
font-size: 28rpx;
color: #7a7269;
line-height: 42rpx;
.worth-list{
display: flex;
margin-left: 30rpx;
.worth-item-img{
flex: 1;
margin-right: 20rpx;
width: 290rpx;
height: 560rpx;
}
img{
width: 290rpx;
height: 560rpx;
}
.worth-item{
padding: 0 35rpx 0 40rpx;
flex: 1;
box-sizing: border-box;
background: url("../../../static/images/index/worth-bg1.png") no-repeat;
background-size: 100% 100%;
width: 290rpx;
height: 560rpx;
margin-right: 20rpx;
}
}
}ios没有问题，样式正常，然后到了安卓机上，却出现了横向滚动条.......然后各种找如何去除横向滚动条的方法....
二、隐藏滚动条
在网上搜了很多，都是说加上这段代码就可以：
/隐藏滚动条/
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}或者有的人说这样子：
/隐藏滚动条/
::-webkit-scrollbar{
display: none;
}然而两种方法我都试过，然而在安卓机上并没什么鸟用。
后来看到有人这么说：
1.scroll-view 中的需要滑动的元素不可以用 float 浮动；
2.scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex; 是没有作用的；
3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排；
4.包裹 scroll-view 的大盒子有明确的宽和加上样式--> overflow:hidden;white-space:nowrap;
好像能行得通....不用flex,不用float
然后改写css代码
.worth-wraper{
margin-top: 60rpx;
width: 750rpx;
height: 560rpx;
overflow: hidden;
scroll-view{
width: 100%;
white-space: nowrap;
}
.worth-list{
display: inline-block;
margin-left: 30rpx;
padding-bottom: 60rpx; //加个padding值，这样高度大于scroll-view外面包裹的元素
.worth-item-img{
margin-right: 20rpx;
width: 290rpx;
height: 560rpx;
display: inline-block;
}
}
}到这里，scroll-view安卓机上横向滚动条消失了，大概长这样：
感谢你能够认真阅读完这篇文章，希望小编分享的“小程序如何实现scroll-view安卓机隐藏横向滚动条”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
