android滚动条布局横向,小程序scroll-view安卓机隐藏横向滚动条的实现

一、实践踩坑

项目使用mpvue开发

1.使用flex布局

// html大概长这样

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

由于版权问题，暂不方便上图，上图来源于网络，请见谅。