原文：http://jungahuang.com/2017/07/30/something-about-web-app/

三月中旬跳完槽之後就好好久沒寫博客了，跳到某公司之後，懷揣著滿腔熱水的我又投入了工作中，從面試、辦理離職到入職只用了一個星期。這效率也沒誰了，入職之後給了一個小項目，用Vue全家桶開發一個簡易的個人博客。因為之前自學了解過，於是很快就上手，原本要求用兩周的時間用了三天就完成了全部的功能，於是就一周之後就開始安排到項目組進行實際的開發中了，最後被安排到招聘組負責校招的前端開發。一去就搞事情，給我安排了後台移動端的開發，就是為了方便領導手機上使用，基於內部項目都是用了Vue，最後確定用Vue+一個移動端的基於Vue的UI框架Vux進行開發，於是就進入了移動端的踩坑之旅，之前比較少接觸移動端開發。 項目開發是基於Vue的UI框架Vux，其實就是一套基於We-UI的一套移動端UI框架，但根據實際情況，一些布局還是得自己去重構。於是就愉快的踩起了移動端開發的坑。

滾動穿透問題

滾動穿透是指在移動端當有 fixed 遮罩背景和彈出層時，在屏幕上滑動能夠滑動背景下面的內容。網上整理了解決方案，但有些還是存在一定的問題：

設置overflow為hidden

即當彈出層彈出時在html上添加.modal-open,禁用 html 和 body 的滾動條,但實際用上就會發現：

由於 html 和 body的滾動條都被禁用，彈出層後頁面的滾動位置會丟失，需要用 js 來計算原來滾動的位置，在彈出時保持滾動位置；

杯具(＞﹏＜)的是頁面的背景還是能夠有滾的動的效果

js 之 touchmove + preventDefault

即通過阻止移動端touchmove事件，但實際用上會發現彈出層需要滾動時也會被阻止(＞﹏＜)

最後解決方案：position: fixed

這種方式同樣當彈出層彈出時滾動條會丟失，所以還需要使用js來保存滾動條的位置，在關閉彈出層時將滾動位置還原；

本人親測確實比較完美解決了移動端滾動問題

移動端輸入框被鍵盤擋住問題

由於所開發的頁面內嵌在公司的一個APP中，有一個類似聊天窗口的界面，測試的時候發現在部分安卓機中輸入框被完全遮擋住，踩這個坑時在網上找了好多資料，好像都沒有一套完整的解決辦法，先看其中一種解決辦法，可以解決絕大數安卓機上面的問題：

即在安卓機中通過監聽當窗口resize時，判斷當前獲得焦點的元素是否為輸入框，再調用該元素的scrollIntoView()，即將該元素展示在當前窗口的可視區域。由於只有scrollIntoView被各瀏覽器均支持，所以這個方法最為常用。 使用這段代碼之後，在微信或者其他瀏覽器測試時有效果，但因為是需要內嵌在自家APP上，使用這段代碼一直沒有解決輸入框被擋住的問題，最後測試才發現，APP內置瀏覽器在聚焦輸入框彈出鍵盤根本沒有觸發窗口的resize事件，瞬間心中萬馬奔騰(＞﹏＜)~~~，後面在借鑒了某阿里的一個網頁版的聊天界面，發現它是通過獲取輸入框焦點將輸入框定位到窗口略高於輸入框的位置，在失去焦點鍵盤彈回時再恢復到底部，於是通過這種方式處理，暫時比較暴力的解決了在安卓上該APP上輸入框被擋住的問題，這種方法顯然是不完美的，比如由於無法監聽resize事件，而且使用的鍵盤高度不固定，所以只能大概的將高度設置保持在屏幕一半偏上一點。保證絕大數情況下輸入框在鍵盤之上顯示。

IOS滾動不平滑的問題

在移動端特別是iOS中，當滾動屏幕時會發現手指一拿開滾動就停止，這種用戶體驗效果很不好，有種給用戶滾動卡頓的感覺。CSS3中的-webkit-overflow-scrolling屬性可以完美的解決這個問題，該屬性可控制元素在移動設備上是否使用滾動回彈效果:

1.auto

使用普通滾動, 當手指從觸摸屏上移開，滾動會立即停止。

2.touch

使用具有回彈效果的滾動, 當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會創建一個新的堆棧上下文。

END

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！