資訊專欄INFORMATION COLUMN
摘要：問題最近入職一家公司接手了一個項目，使用了，這個項目使用的初衷只是把它當作框架，但是在的瀏覽器或者是微信內(nèi)置的瀏覽器打開時會出現(xiàn)滾動凍結(jié)的問題。至于為什么這個屬性導致了滾動凍結(jié)的原因，水平太低不知道怎么研究。
問題
最近入職一家公司接手了一個項目，使用了vue+framework7，這個項目使用framework7的初衷只是把它當作UI框架，但是在ios的safari瀏覽器或者是微信內(nèi)置的瀏覽器打開時會出現(xiàn)滾動凍結(jié)的問題。 具體操作： 頁面處于頂端時用力往下拉，或者頁面處于底部時用力往下拉，在ios下頂部或者底部會出現(xiàn)空白區(qū)域，手松開后頁面會恢復到原位，但是有時候經(jīng)過上面的操作后，頁面無法用手指滑動了。解決辦法
先上解決的代碼，但是這個并不是很完美，但是也找不到更好的辦法了
在你的項目中使用的全局樣式文件中添加:
.page-content::before { display: block; content: ""; position: absolute; z-index: -99999; top: 0px; left: 0px; bottom: -1px; right: 0px; }
原因
兇手就是這個屬性
-webkit-overflow-scrolling: touch;
這個屬性只有在iOS下才生效，當容器中的內(nèi)容的height大于容器的height的時候使用overflow: scroll,就會產(chǎn)生滾動，而-webkit-overflow-scrolling: touch就會使?jié)L動變得平滑、帶有慣性。在Android中的屬性是overflow: scroll或者overflow: auto后是不需要這個屬性的，本身的滾動就會產(chǎn)生平滑和帶有慣性的效果。
至于為什么這個屬性導致了iOS滾動凍結(jié)的原因，emmmm...水平太低不知道怎么研究。
百度了好久看到一篇文章
深入研究-webkit-overflow-scrolling:touch及ios滾動
這篇文章講述了基本的原因，不過最后的解決方案我試過好像還是有點問題，用手在屏幕上快速滑動的時候還是會凍結(jié)
最后到github上framework7的issue中找有人遇到相同的問題了，我提出了我的情況，有個人回復了，上面的解決的代碼就是它提供的，這個是鏈接Problem with scrolling in App in Home Screen Added.
解決思路跟上面一篇國內(nèi)的文章是一樣的，但是我感覺這個更好
國外還有另外一款框架叫onsen跟framework7有相同的問題，因為他們?yōu)榱耸筰OS的滾動能夠平滑都使用了-webkit-overflow-scrolling: touch；
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100575.html
摘要：發(fā)現(xiàn)問題看到和都升級到了團隊打算用新版本做些新東西有和中文文檔的加成開始還算順利也能把項目跑起來但是打包的時候發(fā)生問題了報錯如下分析問題首先觀察這是一個的報錯說是函數(shù)沒有收到正確的值再 發(fā)現(xiàn)問題 看到 vue-cli3 和 framework7 都升級到3.0了,團隊打算用新版本做些新東西.有 https://github.com/framework7... 和 vue-cli3 中文...
摘要：由于初版需求及開發(fā)工作都沒有參與，在接手項目后過了遍前端結(jié)構(gòu)發(fā)現(xiàn)所有交互及組件都是現(xiàn)擼，并未使用市面上已有的優(yōu)秀前端框架從我個人角度理解上出發(fā)，后續(xù)需求變更中當需要實現(xiàn)某些常用組件樣式或交互時，基本上都需要現(xiàn)擼或者尋找合適的組件。 2016悄無聲息的過去了，再過不久便是農(nóng)歷新年 這幾天相對清閑梳理了一下去年所做的工作，希望在新的一年能發(fā)展的更好 今年一共研發(fā)或升級了五款產(chǎn)品：合伙人、奪...
摘要：小程序開發(fā)網(wǎng)站推薦微信小程序支付寶小程序百度智能小程序字符跳動小程序小程序組件化開發(fā)框架開發(fā)小程序框架語法開發(fā)小程序框架，漸進式應用漸進式應用教程博客大牛推薦張鑫旭個人網(wǎng)站阮一峰網(wǎng)絡日志阮一峰教程廖雪峰官方網(wǎng)站呂大豹的博客司徒正美博客編程教 小程序開發(fā)網(wǎng)站推薦 微信小程序:https://developers.weixin.qq.... 支付寶小程序:https://open.al...
摘要：簡潔直觀強悍的前端開發(fā)框架，讓開發(fā)更迅速簡單。是一套基于的前端框架。首個版本發(fā)布于年金秋，她區(qū)別于那些基于底層的框架，卻并非逆道而行，而是信奉返璞歸真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...
閱讀 3885·2021-09-10 11:22
閱讀 2358·2021-09-03 10:30
閱讀 3674·2019-08-30 15:55
閱讀 1907·2019-08-30 15:44
閱讀 852·2019-08-30 15:44
閱讀 597·2019-08-30 14:04
閱讀 3050·2019-08-29 17:18
閱讀 1275·2019-08-29 15:04
