一、实践踩坑

项目使用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安卓机上横向滚动条消失了，大概长这样：

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