小程序scroll-view安卓机隐藏横向滚动条的实现详解


Posted in Javascript onMay 16, 2019

一、实践踩坑

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

小程序scroll-view安卓机隐藏横向滚动条的实现详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
jQuery AjaxQueue改进步骤
Oct 06 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
Aug 24 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
简单实现js点击展开二级菜单功能
May 16 Javascript
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
在vue项目中,使用axios跨域处理
Mar 07 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 Javascript
canvas多重阴影发光效果实现
Apr 20 Javascript
微信小程序云开发之云函数详解
May 16 #Javascript
微信小程序云开发之模拟后台增删改查
May 16 #Javascript
微信小程序云开发之新手环境配置
May 16 #Javascript
vue项目中使用scss的方法步骤
May 16 #Javascript
微信小程序云开发使用方法新手初体验
May 16 #Javascript
angular多语言配置详解
May 16 #Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 #Javascript
You might like
PHP 数字左侧自动补0
2008/03/31 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
prototype 源码中文说明之 prototype.js
2006/09/22 Javascript
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
2013/12/31 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
JavaScript中Array的实用操作技巧分享
2016/09/11 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
python批量将excel内容进行翻译写入功能
2019/10/10 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript