onscroll在移動端的使用

標籤：nbsp   性問題   測試   developer   定義   row   參考   定位在   相容性   

1.實際需求

??（移動端項目）當往下滑動到一定距離時，顯示導覽列，導覽列定位在頂部，當向上滑動並小於那個距離時，導覽列隱藏。 

2.解決方案

??即時監測瀏覽器滾動高度，綁定onscroll事件，具體詳情見此文--https://github.com/merrier/mobile-scroll-events，此文介紹的很詳細，包括在Android 和 ios上的相容性問題，以及處理方案。下面說點此文沒有的。 

3.期間所遇問題

1. scrollY & pageYOffset 
   ??當時因未知原因，使用scrollTop在ios上測試失敗，後在上文連結中的參考文章onscroll Event Issues on Mobile Browsers中，發現裡面的執行個體使用的window.scrollY，可以即時反映捲軸滾動高度，即便是慣性滾動也能成功反映出。pageYOffset是scrollY的別名，區別在於pageYOffset的相容性比較好。
2. 關於pageYOffset出現的bug問題 
   ??官方給出的定義為唯讀,然而實際情況卻是如下：（執行個體為仿百度做的）

（1）綁定onscroll事件

（2）導航切換，頁面滾動到222px的地方，不顯示上方的搜尋方塊內容

（3）頁面初始進去，沒什麼問題，效果正常。但是當切換了導航後，問題就來了，滾動到頂部，導航卻出現了，

（4）觀察到列印出的window.pageYOffset，在切換了導航後一直為 222， what？？？？？？

這個怎麼看怎麼像是被賦值了，說好的唯讀呢？（暫未理解。。。）

（5）最後的解決辦法，就是把window.pageYOffset去掉了，不用效果也是正常的（當時陰差陽錯才用到這個）

onscroll在移動端的使用