小程序scrollview安卓机隐藏横向滚动条的实现

一、实践踩坑

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

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