移動端專案經常碰到的乙個問題是ios系統的橡皮筋效果處理，這個效果本身的體驗還是挺不錯的，但是當我們的應用出現遮罩層時，此時滑動頁面，我們的預期是頁面不進行滾動或者當前遮罩層內部滾動，而實際上滑動會觸發橡皮筋效果，與預期不符。
這一次我們的移動端專案中毫不意外碰到了這個問題，通過一些實踐，最終還算完美地解決了這個問題。處理方法的核心就是：監聽遮罩層的』touchmove』事件，如果遮罩層不需要滑動，則直接阻止其預設行為；如果遮罩層需要滾動，則判斷觸發事件的『target』元素是否屬於遮罩層，不屬於則直接阻止預設行為，屬於則要判斷元素滾動是否到達頂部或者底部，已到達頂部則阻止下拉，同理，到達底部則阻止上拉；而上拉下拉的判斷，則通過元素『touchstart』與『touchmove』事件直接手指觸控的位置之差來判斷。差值為負則上拉，為正則下拉。
在我的react移動端專案中，有一組下拉框元件需要進行滑動處理，其中有遮罩層不可滾動的，也有需要滾動的，具體實現是在『componentwillreceiveprops』這個鉤子函式中，依據傳入的props值來判斷遮罩層是否開啟以及該元件是否需要滾動，具體**如下：
componentwillreceiveprops(nextprops)
else if(nextprops.opened)
else if(e.target.nodename=='li' &&e.target.parentnode &&e.target.parentnode.nodename==='ul')
}}, false);
}}
//獲取滑動初始值
ontouchstart = (e) => ;
//阻止滾動
stoptouchmove = (element)=>, false);
}}
另：移動端滾動效果通常是通過加『overflow: auto;』實現，但是只加這個屬性滾動會不流暢，因此通常需要在加一句『-webkit-overflow-scrolling: touch;』，這樣滾動效果就會很流暢了。
移動端iOS阻止橡皮筋效果
只有ios有這個效果，android沒有這個問題。首先想到event.preventdefault 但是如果直接新增到body上，整個頁面就不會滾動了。機智的你立刻想到，只有到達臨界值的時候在阻止事件預設行為不就行啦！是這樣的，我們只需要判斷，頁面是否滾動到了頂端和底部即可。var starty,e...
iOS11踩坑記錄
記錄在ios 11上遇到的一些問題 void layoutsubviews 複製 ios10.3.3下，乙個view從建立 執行show動畫 隱藏 ios 11下，乙個view從建立 執行show動畫 隱藏 ios10.3.3執行動畫不會呼叫layoutsubviews方法，而在ios 11下，當執...
javascript之踩坑記錄
console.log true console.log false 這個坑在於js裡的 和 的區別。1 對於string,number等基礎型別，和 是有區別的 1 不同型別間比較，之比較 轉化成同一型別後的值 看 值 是否相等，如果型別不同，其結果就是不等 2 同型別比較，直接進行 值 比較，兩...