小程序滚动视图安卓机隐藏横向滚动条的实现详解

一、实践踩坑

项目使用没朋友开发

1.使用弯曲布局

//html大概长这样div class=' worth-wrapper ' scroll-view scroll-x=' true ' scroll-left=' 0 ' div class=' worth-list ' div class=' worth-item-img ' img src=' http :/static/images/index/brand 1。png ' alt=' '/div class=' worth-item-img ' img src=' http :/static/images/index/brand 2。png ' alt=' '/div class=' worth-item-img '相应就大概长这样worth-wrapper { margin-top : 60 rpx；高度： 560rpx盒子尺寸：边框盒子；显示： flex宽度： 750 rpx飞越：隐藏；font-size : 28 rpxcolor: # 7a7269线高： 42 rpx。价值列表{ display:灵活左边距左： 30rpx .价值项目img { flex : 1；右边距： 20 rpx宽度： 290 rpx高度： 560rpx} img {宽度： 290 rpx h8 : 560 rpx }。价值项目{ padd : 0 35 rpx 0 40 rpx flex : 1；盒子尺寸：边框盒子；背景： url('./././static/images/index/worth-bg1。png ')不重复；背景尺寸： 100% 100%;宽度： 290 rpx高度： 560rpx右边距： 20 rpx}}}ios没有问题，样式正常，然后到了安卓机上，却出现了横向滚动条.然后各种找如何去除横向滚动条的方法.

二、隐藏滚动条

在网上搜了很多，都是说加上这段代码就可以：

/隐藏滚动条/:-web工具包-滚动条{ width : 0；高度： 0;颜色：透明；}或者有的人说这样子：

/隐藏滚动条/:-web工具包-滚动条{显示屏：无；}然而两种方法我都试过，然而在安卓机上并没什么鸟用。

后来看到有人这么说：

1 .滚动视图中的需要滑动的元素不可以用漂浮物浮动；

2 .滚动视图中的包裹需要滑动的元素的大盒子用display:flex是没有作用的；

3 .滚动视图中的需要滑动的元素要用dislay :内嵌块；进行元素的横向编排；

4.包裹滚动视图的大盒子有明确的宽和加上样式-飞越：隐蔽；空白：无说唱；

好像能行得通.不用弯曲，不用漂浮物

然后改写钢性铸铁代码。worth-wrapper { margin-top : 60 rpx；宽度： 750 rpx高度： 560rpx飞越：隐藏；滚动视图{宽度： 100%;空白： nowrap} .价值列表{ display : inline-block；左边距左： 30rpx填充-底部： 60 rpx//加个填料值，这样高度大于滚动视图外面包裹的元素价值项目img { margin-right : 20 rpx；宽度： 290 rpx高度： 560rpxdisplay:内联块；} }}到这里，滚动视图安卓机上横向滚动条消失了，大概长这样：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。