移动端ios中H5动态加载数据滚动不了

作者: MJ 分类: javascript 发布时间: 2019-06-10 14:33

记一次ios兼容问题,一个中秋节基本上一半时间都在测试这个问题,好在最后问题解决了,心情舒畅。

首先出现的问题是在,我在react中用到了mescroll,从列表跳转详情,很简单的需求,安卓机上没啥问题,测试人员提出的问题:在iphone手机上详情页面信息显示不全,也滚动不了。(当时我是不信的)

然后自己拿过来iphoneX手机试了一下,确实显示不全,也不能滚动,然后就在想滚动是不是被限制了,赶紧去查代码中有没有

影响一


document.addEventListener(‘touchmove’, function(e) { e.preventDefault(); }, false)

经检查不是它影响的,崩溃1。

因为项目中也引入了其他插件的样式,所以会不会是其他样式中含有overflow:hidden。

影响二

overflow:hidden

经检查不是它影响的,崩溃2。

然后我就跳出来了可能不是滚动条的问题,是不是引入的mescroll影响到了,赶紧把引入的mescroll.css注释掉,再试,还是有问题。

影响三

引入的mescroll等第三方插件影响

经检查不是它影响的,崩溃3。

然后我把代码在本地浏览器chrome上(iphone模式)跑一下,跳转详情页面,鼠标滚轴可以滚动,手动滑动确实没反应,然后刷新一下页面可以滚动了,重新再来一次,初始化进入页面不可以滚动,刷新可以滚动,鼠标滚轴可以滚动,当时的心情又喜又无语,喜的是复现了问题, 无语的是这是啥玩意问题。

经过长时间的搜索资料(中间尝试了无数种方案和猜测,略过吧,都是泪),发现问题可能出现在ios在渲染页面前,对于有-webkit-overflow-scrolling的网页,会创建一个UIScrollView,提供子layer给渲染模块使用。 所以我的页面可能在创建 UIScrollView 的时候,并没有渲染完毕,所以认为它是不可滚动的。

解决办法:

方法就是在-webkit-overflow-scrolling:touch属性的下一层子元素上,将height加1%或1px。从而主动触发scrollbar

main-inner {
min-height: calc(100% + 1px)
}

main:after {
min-height: calc(100% + 1px)
}

参考: https://www.cnblogs.com/xiahj/p/8036419.html

===============================================================

你以为就完了?错!所有办法在我这都不起作用,彻底崩溃!!!!!!

看到了文章最后一句话 “如果不想那么费心,直接上iScroll ”,这句话点醒我了,我页面中列表页面用到了mescroll,所以这个页面直接给他一个scroll的环境包裹一下试一试不就行了,经过尝试完美解决了这个蛋疼的问题。

===================== 完结 ====================

知道真相的我眼泪掉下来!!!!!!

上边虽然解决了一个页面的问题,但是经测试只要经过订单页面的页面,滚动就不行了,妈蛋,然后冷静下来,从头分析order这个页面所有的内容,突然发现了一个mescroll的配置项

isBounce: false

这个是禁止ios下拉回弹,就是比如微信上边显示当前网址信息的部位(
http://www.mescroll.com/qa.html#q10 ),改成true,一切问题解决了,一切之前的疑惑全都解开了,对,就是这个配置项,眼泪……….

总结:虽然最后的问题是一个配置的问题,但是也从头到尾过了一下ios的滚动兼容问题,相信下次不会出现上边出现的问题了,加油!!!

欢迎关注小程序,感谢您的支持!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注