小程序丨scroll-view ios苹果手机垂直滚动条怎么隐藏

发布网友 发布时间：2022-04-26 22:12

我来回答

共2个回答

懂视网 时间：2022-04-26 19:41

一、实践踩坑

项目使用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="https://www.gxlcms.com/static/images/index/brand1.png" alt="">
 </div>
 <div class="worth-item-img">
 <img src="https://www.gxlcms.com/static/images/index/brand2.png" alt="">
 </div>
 <div class="worth-item-img">
 <img src="https://www.gxlcms.com/static/images/index/brand3.png" alt="">
 </div>
 <div class="worth-item-img">
 <img src="https://www.gxlcms.com/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安卓机上横向滚动条消失了，大概长这样：

热心网友 时间：2022-04-26 16:49