Sharon's daily

在開發 mobile web 的時候，有遇到在 ios 裝置 scroll 會卡頓 或者 頁面捲動時 position: fixed; 會抖動？

這是我自己的開發筆記，在這邊也可以跟大家做個分享，有需要的請享用啊~

問題一：iPhone safari 的 scroll 滑動起來很卡，有黏滯感 

當我們在開發手機版網頁時，常常遇到的版面是 header 和 footer 要固定不動，中間 body的部分要能滾動，一般來說 header 、footer的部份我們會用( position:fixed; ) 來設定他的固定位置，在網頁上模擬的手機畫面，滾動完全沒問題，順的不要不要的，但一旦上到實體機上，惡夢的開始，一開始不了解各機種 scroll 的特性，所以就以公司有的測試機都試過一輪，最後發現 Android 系統的手機 scroll 時一樣很順，但就只有在ios系統的手機無法完美的滑動。

解決方式：在要滑動的該元素上加入 ( -webkit-overflow-scrolling: touch;)

-webkit-overflow-scrolling 是指在裝置上的滾動使用觸控的方式。

我們常用語法有下面兩種:

-webkit-overflow-scrolling: auto; (滑動起來沒有估溜的感覺，滑到哪停到哪)

-webkit-overflow-scrolling: touch; (沒有黏滯感，有回彈的效果)

⚠ 注意：-webkit-overflow-scrolling: touch;　這個語法並非完美無缺，他還是有存在一些坑，例如會突然卡住，但目前我尚未找到解法，網上資訊也不多，若有發現會在更新上來，或者你有方法解決也歡迎你告訴我，我會萬分感激。

順帶一提蠻多人會直接用第三方套件iScroll，來解決scroll的問題，溫馨提醒，若要使用這類的套件，請務必要看文件啊~不然你只是又把自己推到另一個坑而已。如何使用iScroll? 你可以參考這篇文章

問題二：在手機版網頁使用( position: fixed; ) - 在捲動頁面時會出現抖動與頁面縮放的問題

剛剛有提到，在做手機版網頁頁面時常常會遇到導覽列或是 footer 亦或是側邊廣告要固定不動，這時我們就會用 position:fixed; 這個語法讓頁面不論滾到哪裡他都會固定在那不動，但是...當我們快速滑動時，或是手指壓著螢幕，上下移動頁面，你會發現他離開了他要固定的位置，但放開後他又乖乖回到他的位置。

解決方式：在該元素上加入 ( -webkit-transform: translateZ(0);)，就可以解決囉!

想知道原理的可以參考這篇文章

【 以上純屬個人開發過程中遇到的問題，在這邊做個紀錄，歡迎討論指教 🙏】