移動端onTouchMove事件 以及Fixed定位的坑

就爲了一個小特效搞了一天時間！話很少說

需求是這樣的：在頁面上作一個浮動的小圖標，能夠拖拽移動它。

效果是這樣的：

代碼是這樣的：

你們都知道，移動端拖拽事件主要就是利用touchmove。爲了防止拖拽它的時候，禁止瀏覽器的上下滾動，個人方法是在onTouchStart中將html和body的樣式設爲 height: 100%; overflow: hidden，而後在onTouchEnd中將樣式清空。最後在onTouchStart,onTouchMove中添加了e.preventDefault()方法來阻止瀏覽器默認行爲。

可是！PC端調試的時候好好的，而後到手機訪問的時候就失效！瀏覽器也跟着一塊兒滾犢子！體驗賊差！最神奇的是，一樣都是蘋果自帶的Safari瀏覽器，個人手機不行，測試的手機就正常！

研究了很久都沒解決，而後發現PC端雖然正常，可是報了個警告：

什麼玩意？翻譯一波

百度後發現：Chorme某個版本更新後，爲了讓頁面滑動流暢的飛起來，在window、document 和 body 上註冊的 touchstart 和 touchmove 事件處理函數，默認 passive爲 true。瀏覽器會忽略默認事件的preventDefault(), 你要是強行阻止會彈出一個警告, 也就是上面那個黃黃的！

這時候又納悶了，這個passive又是啥？

Passive Event Listeners是Chrome提出的一個新的瀏覽器特性：Web開發者經過一個新的屬性passive來告訴瀏覽器，當前頁面內註冊的事件監聽器內部是否會調用preventDefault函數來阻止事件的默認行爲，以便瀏覽器根據這個信息更好地作出決策來優化頁面性能。當屬性passive的值爲true的時候，表明該監聽器內部不會調用preventDefault函數來阻止默認滑動行爲，Chrome瀏覽器稱這類型的監聽器爲被動(passive)監聽器。目前Chrome主要利用該特性來優化頁面的滑動性能，因此Passive Event Listeners特性當前僅支持mousewheel/touch相關事件。

這時我感受找到了眉目，而後就換了一種方式！不在DOM上直接綁定方法了，而是在componentDidMount鉤子裏添加監聽！

而後發現，成了~~啊哈哈哈

最後要提一嘴，對於那個警告網上不少帖子都說加上全局樣式*{touch-action: none}就行了。我在這裏告誡你們，可千萬不能亂加，加了這個有些瀏覽器全部頁面都不能滾動了！並且也只是爲了清除那個警告，並無達到想要的效果。有興趣的能夠去了解一下touch-action屬性。

。。。   。。。

糟糕的一天還沒結束，我又發現了個新問題……就是這個浮動的小圖標是fixed定位的，可是怎麼不隨着瀏覽器滾動而固定在屏幕上呢？？

最後發現body的跟標籤，也就是id爲root的div上有transform屬性！（這項目不是我寫的）

規範中規定：若是元素的transform值不爲none，則該元素會生成 包含塊和層疊上下文

什麼是包含塊？包含塊（Containing Block）是視覺格式化模型的一個重要概念，它與框模型相似，也能夠理解爲一個矩形，而這個矩形的做用是爲它裏面包含的元素提供一個參考，元素的尺寸和位置的計算每每是由該元素所在的包含塊決定的。

說重點！包含塊從新定位了座標參考系！！因此transform會影響子元素的絕對定位（fixed定位也是絕對定位的一種）！

知道咋回事了，那就來看看前輩爲何加這個transform？代碼是left: 50%; transform: translate(-50%);

就是爲了大屏幕下的居中定位。。而大屏幕會重定向到PC端官網，因此刪掉！！

搞定！下班！