解决ios系统h5页面滚动条问题
需求：页面在各种手机端可以正常横向滚动问题：（以下所有效果均针对ios系统下的，安卓是不存在这个问题的）1、第一次用基础css实现滚动：overflow：scroll；效果：可以滑动，但是页面滚动起来非常卡，没有回弹顺滑的效果，手指一停，页面就停住了。2、第二次网上搜方法解决了滑动很卡的现象，给很宽的那个容器加上了css属性：-webkit-overflow-scrolling：tou...
需求：页面在各种手机端可以正常横向滚动
问题：（以下所有效果均针对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；再去尝试；完美解决！！！
原理目前还没搞清楚，但是这种方法可以解决
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)