Small program Scroll – View Android hidden horizontal scroll bar implementation

First, practice trample pit

The project was developed using MPVUE

1. Use Flex for layout

// HTML looks something like this

<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 will look something like this. 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 is fine, the style is fine, and then on Android, there is a horizontal scroll bar……. Then find out how to remove the horizontal scroll bar….

2. Hide the scroll bar

I searched a lot on the Internet, all of them said that this code can be added:

/ Hide the scroll bar /

::-webkit-scrollbar{

width: 0;

height: 0;

color: transparent;

} or some people say something like this:

/ Hide the scroll bar /

::-webkit-scrollbar{

display: none;

} I’ve tried both methods, however, and they don’t work on Android.

Then I saw someone say this:

1. Elements that need to slide in the scroll view cannot be float;

2. Display :flex to wrap the large box in the scroll view that needs to slide the elements; It doesn’t work;

3. Use dislay:inline-block for elements that need to slide in the scroll view; Horizontal arrangement of elements;

4. The big box wrapped in the scroll view has a clear width and add style –> overflow:hidden; white-space:nowrap;

It seems to work…. No flex, no float

Then rewrite the CSS code.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; // Add a padding value that is larger than the scroll outside the view.worth-item-img {margin-right: 20rpx; margin-right: 20rpx; width: 290rpx; height: 560rpx; display: inline-block; }}

} At this point, the scroll bar disappears on Android. It looks something like this:

Due to copyright problems, it is not convenient for the time being. The above picture comes from the network, please forgive me.