小程序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安卓機上橫向滾動條消失了，大概長這樣：

由於版權問題，暫不方便上圖，上圖來源於網絡，請見諒。