今天發現專案有一個頁面滑動效果在iOS（iPhone6s&iPhoneSE）上十分順暢，到安卓手機（三星新款手機，效能較高）上就很卡頓，百思不得其解。

看了一下，意識到可能是因為div滑動而不是body滑動造成的卡頓。

檢查了CSS檔案

body {
				background-color: #eaeaea;
				overflow: hidden;			
				}

發現我不小心將body滾動給關閉了，馬上把overflow:hidden這行程式碼刪掉。

檢查了一下，發現滑動卡頓的情況沒有了。

為了方便讀者現將原文貼上於下方，感謝作者分享。

App的頂部一般有titlebar，下面是list。
常見的一個需求是要在list滾動時，titlebar不動。
這個簡單的需求，實現起來其實並不簡單。

在普通web上的做法是使用div的滾動條，把list放到div裡。
但是很不幸的是，div滾動條在Android4.4以下的手機上不可商用，如果dom複雜，不管多高階的Android手機，滾動效果也慘不忍睹。

還有一種做法是把titlebar使用fix來固頂。
但此時手機瀏覽器的滾動條會通到頂部，當titlebar的右側出現滾動條時，看起來非常怪異。
還有一個副作用是滾動太快時，titlebar的div會下來一下又彈上去。這是因為滾動時觸發頁面重繪，dom很複雜時重繪來不及，絕對定位的titlebar就會先下來後上去。

還有一種方法是使用自繪的滾動條，即不用瀏覽器的滾動條，自己畫一個滾動條，iScroll等方案是採取這種思路。但模擬的始終是模擬的，和原生的滾動條效果還是差很多，在列表頭和尾的拉動回彈的表現不佳，而且列表長了、內容複雜了，非常卡頓。

想要解決這個問題其實也不難，既然div的滾動條卡，而瀏覽器body的整體滾動條不卡，那就老老實實使用瀏覽器的body滾動。title區域有2種處理方式。
1. 原生title
HBuilder8.0起，支援了原生的navigationbar，建立webview物件時，在style引數裡配置navigationbar就可以得到一個原生的title。
HTML頁面的滾動部分會自動在這個原生title下面。
而這個原生title，又屬於nativeObj.view，可以自由的在上面寫字繪圖，擁有良好的自定義性。
在HBuilder8.2中，navigationbar被進一步合併到subnview體系中，成為webview的titleNview。擁有比之前更好的動畫效能。
配合nativeObj下面的原生imageslider，還可以實現沉浸式題圖效果，題圖開始通頂到狀態列上，在向下滾動後漸變消失，而title漸變出現，非常動感。
關於沉浸式，是另外的話題，此處不展開。有興趣可參考

http://ask.dcloud.net.cn/article/1150
而且在新窗體動畫時，不管內容頁面渲染多麼慢，原生title在動畫期間一定是渲染好的。
mui對這個效果進行了封裝，使用mui.openWindowWithTitle即可開啟一個帶原生頭的webview。
在Hello mui裡nav bar中點“native title”，可看到效果和原始碼。
2. 基於div的通頂漸變title
很多介面頂部是圖片，滾動後漸變出現title，這種設計就不怕滾動條通頂。
基於div一樣可以實現題圖開始通頂，在向下滾動後漸變消失，而title漸變出現。
在Hello mui裡nav bar中點“透明漸變(div模式)”，可看到效果和原始碼。
（Hello mui中的示例沒有沉浸式，實際是可沉浸的，即圖片通到狀態列上，需要單獨配置webview的沉浸式）
當然也不是所有的介面都可以這麼設計，所以掌握方案1中的原生title是必須的。

已過期歷史：在HBuilder8.0以前，官方曾推薦過雙title式title。
即把螢幕切分成2個webview，把titlebar的HTML裝載到一個webview裡，list頁面是另一個webview，list頁面直接使用瀏覽器的滾動條而不是div滾動條，這樣也可以得到一個流暢的列表滑動體驗。
在mui框架裡，通過mui的init裡的subpage，可以通過配置而不是編碼的方式更加簡單的開發這種雙webview介面。

關於滾動流暢度：

有人仍然使用div滾動然後抱怨滾動不流暢，注意檢查自己的程式碼，一定要用body滾動而不是div滾動。
mui為了多端釋出相容和部分選擇器專案滾動，是提供了div滾動的，尤其是在iOS上因為效能較高使用面更大，但這些都是可配置的，覺得不流暢時注意檢查配置是不是變成div滾動了。
另外不管是mui提供的div滾動還是plus.webview的body滾動，都是可以設滾動加速度值的，可以根據自己的頁面情況設定不同的加速度值。
關於滾動時雖然速度快，但掉幀，即不夠平滑，一般是因為js監聽了滾動或Android硬體加速未啟用。具體在文件中心搜尋硬體加速。