解决微信浏览器公众号h5页面ios苹果机不能上下滑动

这个月做个项目,要求做个h5,然后放到微信公众号里使用。开发完部署之后发现苹果机的页面是不能上下滑动的,好像写了个fixed固定住了似的,但是有意思的是,两个手指头按屏幕滑动是可以滑动的,两个手指头放上去右侧会显示滚动条,有滚动条就会滑动,滚动条消失滑动不了。

因为我们以前几乎都是用uni-app做的H5,所以打的包都是人家uniapp打了自己的东西弄好的,部署直接可以滑,但是我们这次是自己搭的框架(我们直接建的vue项目),所以部署之后遇到了问题。

起初刚开始只能百度搜,但是百度搜出来的答案,清一色的

 overflow: scroll;
 -webkit-overflow-scrolling: touch;

结果放在上面一点效果都没有,后来甚至都搞了网上写的一个v-touch的插件。也是一点用也没有,卡了两三个小时终于看到有个网友发了个评论,说锁住横轴放开纵轴就可以了,但是没用放代码,当时心想反正不知道怎么搞,大不了试试,结果试成功了

解决代码是:

  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  height: 100vh;
  z-index: 200

我试了,overflow得分开写x和y,而且还得写高度。。z-index写不写都行,我瞎写着玩的。有的人在网上说什么父级加overflow:scroll和touch那个,然后子级加个height:100%+1px能解决,我没试,因为那个网友自己也说不合理,我这个直接加父级就可以了,子级什么都不用管。这个问题全网搜了一大圈都没找到解决方案实在是太痛苦了

通过这次问题深深体会到了,下回还是用uni-app吧,自己弄真是太痛苦了

你可能感兴趣的:(前端,ios,微信)