小程序scroll-view安卓機隱藏橫向滾動條的實現(xiàn)詳解
一、實踐踩坑
項目使用mpvue開發(fā)
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沒有問題,樣式正常,然后到了安卓機上,卻出現(xiàn)了橫向滾動條.......然后各種找如何去除橫向滾動條的方法....
二、隱藏滾動條
在網上搜了很多,都是說加上這段代碼就可以:
/隱藏滾動條/ ::-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安卓機上橫向滾動條消失了,大概長這樣:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
javascript提取URL的搜索字符串中的參數(自定義函數實現(xiàn))
我們經常會看到有的頁面鏈接地址后面會跟有參數,很多時候我們需要獲得這些參數的值,接下來將介紹獲取方法,感興趣的朋友可以了解系,希望本文對你有所幫助2013-01-01javascript限制文本框只允許輸入數字(曾經與現(xiàn)在的方法對比)
很多時候需要用到限制文本框的數字輸入,試過許多方法,都不太理想,遂決定自己實現(xiàn)一個來玩玩,接下來介紹曾經使用過的方法與自定義方法的對比,感興趣的朋友可以了解下啊2013-01-01from 表單提交返回值用post或者是get方法實現(xiàn)
from 表單提交的返回值可以用jquery的post或者是get方法去實現(xiàn),具體如下,感興趣的朋友可以參考下,希望對大家有所幫助2013-08-08