admin 管理员组

文章数量: 1184232

需求：页面在各种手机端可以正常横向滚动

问题：（以下所有效果均针对ios系统下的，安卓是不存在这个问题的）

1、第一次用基础css实现滚动：overflow：scroll；效果：可以滑动，但是页面滚动起来非常卡，没有回弹顺滑的效果，手指一停，页面就停住了。

2、第二次网上搜方法解决了滑动很卡的现象，给很宽的那个容器加上了css属性：-webkit-overflow-scrolling：touch；overflow；scroll；效果滑动非常顺滑，有回弹效果，但是也出现了半透明滚动条！滑动过程中有，滑动结束自动消失，显得页面很low。

3、第三次尝试在网上搜索到的伪元素的方法，为很宽的容器加上：：webkit-scrollbar{background-color:transparent;display:none}

结果时而有滚动条时而没有，很懵逼，不得不继续我的尝试探索

4、第四次把这个伪元素的css样式去掉了，为那个很宽的容器加上几个css属性：display：webkit-box；paddingbottom：10px；margin-bottom：-10px；再去尝试；完美解决！！！

 

原理目前还没搞清楚，但是这种方法可以解决

本文标签： 滚动条 页面 系统 iOS

版权声明：本文标题：解决ios系统h5页面滚动条问题 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/b/1754943872a3052967.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。