framework7在iOS下滚动冻结的问题

aaron 发布于2019-08-23 14:25 / 3174人阅读

摘要：问题最近入职一家公司接手了一个项目，使用了，这个项目使用的初衷只是把它当作框架，但是在的浏览器或者是微信内置的浏览器打开时会出现滚动冻结的问题。至于为什么这个属性导致了滚动冻结的原因，水平太低不知道怎么研究。

问题

最近入职一家公司接手了一个项目，使用了vue+framework7，这个项目使用framework7的初衷只是把它当作UI框架，但是在ios的safari浏览器或者是微信内置的浏览器打开时会出现滚动冻结的问题。
具体操作： 页面处于顶端时用力往下拉，或者页面处于底部时用力往下拉，在ios下顶部或者底部会出现空白区域，手松开后页面会恢复到原位，但是有时候经过上面的操作后，页面无法用手指滑动了。

解决办法

先上解决的代码，但是这个并不是很完美，但是也找不到更好的办法了
在你的项目中使用的全局样式文件中添加:

.page-content::before { display: block; content: ""; position: absolute; z-index: -99999; top: 0px; left: 0px; bottom: -1px; right: 0px; }

原因

凶手就是这个属性

-webkit-overflow-scrolling: touch;

这个属性只有在iOS下才生效，当容器中的内容的height大于容器的height的时候使用overflow: scroll,就会产生滚动，而-webkit-overflow-scrolling: touch就会使滚动变得平滑、带有惯性。在Android中的属性是overflow: scroll或者overflow: auto后是不需要这个属性的，本身的滚动就会产生平滑和带有惯性的效果。

至于为什么这个属性导致了iOS滚动冻结的原因，emmmm...水平太低不知道怎么研究。
百度了好久看到一篇文章
深入研究-webkit-overflow-scrolling:touch及ios滚动
这篇文章讲述了基本的原因，不过最后的解决方案我试过好像还是有点问题，用手在屏幕上快速滑动的时候还是会冻结

最后到github上framework7的issue中找有人遇到相同的问题了，我提出了我的情况，有个人回复了，上面的解决的代码就是它提供的，这个是链接Problem with scrolling in App in Home Screen Added.

解决思路跟上面一篇国内的文章是一样的，但是我感觉这个更好
国外还有另外一款框架叫onsen跟framework7有相同的问题，因为他们为了使iOS的滚动能够平滑都使用了-webkit-overflow-scrolling: touch；

云服务器服务器托管域名冻结问题 ios10的适配问题 iOS头像和昵称的问题 spine在unity的问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100575.html

vue-cli 3.0 与 framework7 的一个 css 问题

摘要：发现问题看到和都升级到了团队打算用新版本做些新东西有和中文文档的加成开始还算顺利也能把项目跑起来但是打包的时候发生问题了报错如下分析问题首先观察这是一个的报错说是函数没有收到正确的值再发现问题看到 vue-cli3 和 framework7 都升级到3.0了,团队打算用新版本做些新东西.有 https://github.com/framework7... 和 vue-cli3 中文...

NeverSayNever 2019-08-26 12:12 评论0 收藏0
2016年终工作总结

摘要：由于初版需求及开发工作都没有参与，在接手项目后过了遍前端结构发现所有交互及组件都是现撸，并未使用市面上已有的优秀前端框架从我个人角度理解上出发，后续需求变更中当需要实现某些常用组件样式或交互时，基本上都需要现撸或者寻找合适的组件。 2016悄无声息的过去了，再过不久便是农历新年这几天相对清闲梳理了一下去年所做的工作，希望在新的一年能发展的更好今年一共研发或升级了五款产品：合伙人、夺...

hoohack 2019-06-27 15:14 评论0 收藏0
比较好的网站推荐

摘要：小程序开发网站推荐微信小程序支付宝小程序百度智能小程序字符跳动小程序小程序组件化开发框架开发小程序框架语法开发小程序框架，渐进式应用渐进式应用教程博客大牛推荐张鑫旭个人网站阮一峰网络日志阮一峰教程廖雪峰官方网站吕大豹的博客司徒正美博客编程教小程序开发网站推荐微信小程序:https://developers.weixin.qq.... 支付宝小程序:https://open.al...

Corwien 2019-08-22 16:30 评论0 收藏0
UI大全：前端UI框架集合（持续更新，当前32个）

摘要：简洁直观强悍的前端开发框架，让开发更迅速简单。是一套基于的前端框架。首个版本发布于年金秋，她区别于那些基于底层的框架，却并非逆道而行，而是信奉返璞归真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

only_do 2019-08-22 10:47 评论0 收藏0