framework7在iOS下滾動凍結的問題

aaron 發布于2019-08-23 14:25 / 3322人閱讀

摘要：問題最近入職一家公司接手了一個項目，使用了，這個項目使用的初衷只是把它當作框架，但是在的瀏覽器或者是微信內置的瀏覽器打開時會出現滾動凍結的問題。至于為什么這個屬性導致了滾動凍結的原因，水平太低不知道怎么研究。

問題

最近入職一家公司接手了一個項目，使用了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；

云服務器 GPU云服務器域名凍結問題 ios10的適配問題 iOS頭像和昵稱的問題 spine在unity的問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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