所以就說自己太naive

今天閒地蛋疼著看了下csdn的手機端和一些網站如攜程的，發現不少站點都已經在頂部欄用了fixed，但是不會出現overscroll(俗稱橡皮筋效果或出界)的情況。

上圖就出現了噁心的情況，頁面下拉的時候，原本fixed上去的topbar被背景色覆蓋了。

但是人家csdn和攜程是這樣的：

solution:

一時好奇研究下，發現原來他們將頁面高度限制在客戶端可視區高度，比如我用的是iphone6，document.documentElement.clientHeight就是667,但是在safari瀏覽器上開啟頁面，可視區高度是553px。

將頁面限制在客戶端可視區高寬後，全域性使用-webkit-overflow-scrolling: touch;完全可以模擬原本的流式佈局。(劃重點

一般針對橡皮筋效果的負面影響，要麼限制全域性的touchmove瀏覽器預設行為，要麼在toustart或touchmove的時候監聽scroll位置，在內容滾到頂/底的時候控制scrollTop讓它處於臨界值。

我試了下知乎上這個答案的方式，發現還是偶爾會overscroll，然後找到一個小外掛：

外掛的原始碼很簡單，只做了兩件事，一是給內滾動容器新增樣式，二是監聽其touchStart和scroll事件，在touchStart的時候判斷滾動內容是否超過臨界值並調控，而scroll監聽器只是進行函式節流。

執行localscrollfix(selector)返回一個帶destroy方法的物件，幫我們在解除安裝元件時移除監聽事件。

不得不說，真好用。。。

-------------------------------------------------------------------

不過，對於頂部其實有最簡單的方式，直接用一個div.warpper把topbar包住，div.warpper設定高度(用作佔位),topbar用fixed定位在頂部就好了。