關(guān)于在移動(dòng)端 body overflow：hidden 無效的問題
一、簡述
這篇文章作為一道前菜哈。
很多同學(xué)在做移動(dòng)端的時(shí)候都有遇到移動(dòng)端各種坑，各種固定fiexd失效盏浇，input輸入框錯(cuò)位，軟鍵盤彈出錯(cuò)位等等….但是芽狗，在做一張單頁面的頁面時(shí)绢掰，尤其是以整個(gè)頁面去加載背景圖片的時(shí)候，背景圖片固定就很有必要了童擎。
這里先討論一下body關(guān)于overflow的問題滴劲，移動(dòng)端固定的問題會(huì)在下一篇文章討論。
二顾复、簡單演示
很多時(shí)候都是想著使用body去固定:
? ? body{
? ? ? ? ? ? ? ? position:fixed; //這個(gè)屬性暫時(shí)不提班挖，重點(diǎn)看overflow
? ? ? ? ? ? ? ? overflow:hidden;
? ? }
1、這樣的效果在「PC端」是可以的芯砸，整個(gè)頁面時(shí)被固定的：
em….感覺說的好空萧芙，有句話說得好「talk is easy ,show me the code」 ，上個(gè)demo ：
em…上完code假丧，再來「PC端」的效果演示：
OK双揪，上面GIF演示的效果已經(jīng)告訴我們，body的overflow：hidden在「PC端」是有效果的包帚。
em..接下來是重點(diǎn)好吧渔期，說說在移動(dòng)端的body 如何不行？
2渴邦、同樣的樣式在「移動(dòng)端」是可以滑動(dòng)的疯趟，可以滑動(dòng)就是不合理了。
如何看手機(jī)的上樣式效果對(duì)不對(duì)几莽，我這里稍微講2種方式哈：
（A.說用「微信開發(fā)者工具」的同學(xué)迅办，我這里就不講了，這也是一種方法可以查看移動(dòng)端的樣式效果章蚣，尤其是要用在微信網(wǎng)頁中的，是一個(gè)不錯(cuò)的推薦。B.說用模擬器的同學(xué)纤垂，我也不想說太多了矾策，查看一個(gè)簡單的樣式，難道要全開安卓和iOS 模擬器峭沦？）
2.1贾虽、放到服務(wù)器上
這樣，我把網(wǎng)頁放到了我個(gè)人的服務(wù)器上吼鱼，比較簡單粗暴的做法蓬豁，很通用哈，一輸網(wǎng)址就可以看到了菇肃，下面是把網(wǎng)頁放到手機(jī)之后的效果：
看到上面效果地粪，what！Ｋ霭蟆技！body的hidden:overflow確實(shí)在「移動(dòng)端」真是無效的，很明顯的是可以滑動(dòng)..
這時(shí)IOS手機(jī)上的效果斗忌，在安卓手機(jī)上同樣也是一樣的效果质礼，這里我就不錄屏了，有點(diǎn)累呀
細(xì)心的同學(xué)可以發(fā)現(xiàn)我手機(jī)上的網(wǎng)頁會(huì)出現(xiàn)藍(lán)色织阳，橙色的遮罩眶蕉，em...get 到我這個(gè)點(diǎn)了，上面演示的是第二種方法里的一些調(diào)試唧躲。
2.2使用遠(yuǎn)程web調(diào)試工具-----weinre
?注意造挽！注意！注意惊窖！使用的是weinre這款遠(yuǎn)程調(diào)試工具刽宪，重要的事情講一遍。
上面說的就是可以使用這個(gè)款遠(yuǎn)程web頁面調(diào)試工具界酒，一款稍顯老的工具圣拄，不過好在可以跨平臺(tái)全終端使用，可以無線查看和調(diào)試dom和css樣式毁欣，但是不可以修改dom,不可以斷點(diǎn)調(diào)試…em…缺點(diǎn)比較多庇谆，但是用來查看這個(gè)demo是妥妥的。
? ? ? 有興趣的同學(xué)可以找一下weinre的使用方法凭疮。（或者空閑的時(shí)候?qū)懸幌率褂脀einre的基本教程和心得）
原理就是需要在原網(wǎng)頁中插入一段js代碼饭耳，實(shí)現(xiàn)中間的target，用于傳輸調(diào)試請(qǐng)求执解，請(qǐng)保持在同一網(wǎng)絡(luò)上寞肖。
? 重點(diǎn)來了！重點(diǎn)來了！重點(diǎn)來了新蟆！
作用： 2.2.1觅赊、可以實(shí)現(xiàn)移動(dòng)端可以無線直接查看本地電腦編寫的網(wǎng)頁，而無需放置到服務(wù)器上琼稻。
? ? ? ? ? ? ? ? ? ? 2.2.2吮螺、可以實(shí)現(xiàn)在電腦直接對(duì)移動(dòng)端進(jìn)行dom和樣式調(diào)試，無線連接調(diào)試帕翻。
可以上個(gè)圖看一下效果鸠补；
第一種情況：就是我直接在weinre目錄中添加需要查看的文件，在手機(jī)上可以直接訪問電腦ip嘀掸，獲取本地編寫的網(wǎng)頁紫岩。
上個(gè)圖先：
～文件所在：
～手機(jī)訪問：
? ? ? ? 可以清晰的看到手機(jī)和電腦處于同一局域網(wǎng)，手機(jī)正在訪問到電腦本地的網(wǎng)頁横殴。
? ? ? ? ? ? 第二種情況：我把網(wǎng)頁放到了我的服務(wù)器上被因，手機(jī)訪問可以直接查看，在電腦上也是可以對(duì)手機(jī)的樣式進(jìn)行調(diào)試的衫仑，如下圖：
? ? ? ? ? 這里是可以看到我通過網(wǎng)絡(luò)訪問進(jìn)行的梨与，并在瀏覽器出現(xiàn)類似于chrome dev調(diào)試工具的頁面，正在對(duì)手機(jī)樣式進(jìn)行調(diào)試文狱。
? ? ? ? ? ? 好吧綜上所述粥鞋，可以看到weinre是可以又這個(gè)能力對(duì)移動(dòng)端進(jìn)行樣式調(diào)試的，并且證明說overflow:hidden在移動(dòng)端確實(shí)是可以進(jìn)行無障礙的滑動(dòng)瞄崇。
? ? ? ? ? ??? 回到主題呻粹！回到主題！回到主題苏研！
三等浊、結(jié)論以及解決方法
? ? ? 事實(shí)證明了hidden在移動(dòng)端無效。原因總結(jié)來說是移動(dòng)端的坑摹蘑，對(duì)網(wǎng)頁兼容的問題筹燕；我覺得是移動(dòng)端網(wǎng)頁的html頁面本身也是可以「上下拉扯滑動(dòng)1」的，而body的position位置默認(rèn)是static衅鹿，不做修改的情況下是直接隨著html頁面「滑動(dòng)1」撒踪，而body可以直接在html內(nèi)實(shí)現(xiàn)「滑動(dòng)2」，（兩個(gè)滑動(dòng)是不一樣的滑動(dòng)大渤，「滑動(dòng)1」指的是整個(gè)html相對(duì)于瀏覽器窗口滑動(dòng)制妄，「滑動(dòng)2」指的是整個(gè)body相對(duì)于html頁面滑動(dòng)）
下面是「滑動(dòng)1」的如圖：
「滑動(dòng)2」就是我們本身可以看到的那種效果。
? ? 解決方法：
? ? 通過父節(jié)點(diǎn)固定泵三，像body的父節(jié)點(diǎn)是html耕捞，可以通過固定父節(jié)點(diǎn)html衔掸， 來把其下的字節(jié)點(diǎn)固定，當(dāng)然字節(jié)點(diǎn)前提是不做脫離文檔流的行為砸脊。
? ? html{
? ? ? ? ? position:fixed;
? ? ? ? ? ? height:100%;
? ? ? ? ? ? width:100%;
? ? }
? 完整代碼如下：
這里劇個(gè)透具篇，有個(gè)細(xì)節(jié)的地方是：
比較多的同學(xué)會(huì)直接不添加父節(jié)點(diǎn)固定纬霞，而是直接把body給賦值position:fixed了凌埂；如下
直接這樣寫的，很明顯在手機(jī)端可以看到诗芜，body是固定的瞳抓，但是整個(gè)html頁面在滑動(dòng)，這就達(dá)不到固定的預(yù)期的要求了伏恐。同時(shí)這樣子很容易會(huì)造成一種錯(cuò)覺孩哑，在接下來寫的元素中會(huì)讓人覺得是整個(gè)element在自己滑動(dòng)，其實(shí)不是翠桦，是html頁面在滑動(dòng)横蜒。
嗯嗯，總結(jié)來說就是這樣子销凑。有關(guān)于移動(dòng)端的坑可以交流一下丛晌，我這里剛好有些鏈接，本人覺得是挺不錯(cuò)的各種移動(dòng)端的坑的總結(jié)斗幼。
放其中的一個(gè)鏈接：https://github.com/markyun/My-blog/issues/88
個(gè)人博客原文：http://wusiqing.com/?p=231
多點(diǎn)贊澎蛛，給點(diǎn)小動(dòng)力??！
