小程序scroll-view安卓機隱藏橫向滾動條的實現詳解

2019-11-19 11:32:42

字體：大中小

來源：轉載

供稿：網友

一、實踐踩坑

項目使用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安卓機上橫向滾動條消失了，大概長這樣：