前端 - 移動(dòng)端 絕對(duì)定位 超出無(wú)法隱藏 導(dǎo)致body可以滾動(dòng)
問(wèn)題描述
目前在弄公司移動(dòng)端改版問(wèn)題中，本人css菜鳥(niǎo)，對(duì)移動(dòng)端更是不熟悉，遇到這種PC上無(wú)問(wèn)題，移動(dòng)端出問(wèn)題時(shí)真心無(wú)力。
測(cè)試連接： body滾動(dòng)問(wèn)題地址
測(cè)試瀏覽器： android手機(jī) 上 QQ瀏覽器 UC 瀏覽器 或者微信掃描打開(kāi)
二維碼地址：
問(wèn)題起因：
想要實(shí)現(xiàn)點(diǎn)擊按鈕，右側(cè)進(jìn)入菜單，菜單整體寬度是和body寬度一致，從而遮住整個(gè)屏幕。目前實(shí)現(xiàn)方案是 菜單絕對(duì)定位 寬度100% left:100% 從而整個(gè)菜單超出屏幕，并設(shè)置body overflow-x 為hidden ，從而實(shí)現(xiàn)默認(rèn)情況下菜單不可見(jiàn)， 點(diǎn)擊按鈕 激活菜單，添加active之類的class 變更left 從而實(shí)現(xiàn)右側(cè)動(dòng)畫進(jìn)入效果。
PS:默認(rèn)情況下沒(méi)有讓菜單display none 是考慮 使用display 從none到block 導(dǎo)致沒(méi)有漸變過(guò)程。
問(wèn)題描述如下：
現(xiàn)在出現(xiàn)的問(wèn)題是，在手機(jī)上 左右可以滾動(dòng)，從而可以把屏幕最右邊的菜單給滾進(jìn)來(lái)， PC 上沒(méi)有此問(wèn)題。嘗試各種方法沒(méi)有解決，求大神幫忙。
問(wèn)題截圖：
打開(kāi)頁(yè)面后看到的是上面的效果
左右觸摸滾動(dòng) 可以把右邊的菜單欄位給滾動(dòng)進(jìn)來(lái)，但是我設(shè)置了overlfow-x hidden的，還是可見(jiàn)，求教如何隱藏。
問(wèn)題解答
回答1：因?yàn)橐郧岸及褳g覽器默認(rèn)行為取消掉了，沒(méi)出現(xiàn)過(guò)這種問(wèn)題，所以做了一下午測(cè)試。吐槽一下vivo和華為上的瀏覽器真的有很多兼容性問(wèn)題。從別的論壇上找到一句話傳送門
一個(gè)絕對(duì)定位的子孫元素，部分內(nèi)容在盒子外。但超出的部分不是總會(huì)被剪裁。子孫元素的內(nèi)容就不會(huì)被子孫元素和其包含塊之間的祖先元素的overflow的設(shè)置所剪裁。解釋：元素的子孫元素的包含塊（Containing blocks）是整個(gè)視窗（viewport）或是該元素的祖先元素，內(nèi)容將不會(huì)被剪裁。
但是代碼中菜單塊的直接父級(jí)即body開(kāi)啟了相對(duì)定位，且body設(shè)置了overflow-x:hidden,按照道理說(shuō)是會(huì)被隱藏掉的。但是由于以前遇到的問(wèn)題，我猜想是不是瀏覽區(qū)對(duì)viewport的處理不一樣，導(dǎo)致body也屬于根一級(jí)的包含塊？(沒(méi)做驗(yàn)證)所以希望通過(guò)再包一層p來(lái)解決。html結(jié)構(gòu)如下
<body> <p id=’wrap’> 這里寫原有內(nèi)容 </p></body>
樣式部分其他不做修改
#wrap{overflow-x: hidden;position: relative;}
其他：你的樣式表里好像有重復(fù)樣式，還得優(yōu)化下。先答這么多。等下補(bǔ)充別的移動(dòng)端的一般處理。
回答2：謝邀。那個(gè)，恕我理解能力有限，樓主你說(shuō)這么多，到底是個(gè)什么問(wèn)題？我鏈接到你的問(wèn)題頁(yè)面...還是懵逼中。
回答3：用了iOS的QQ瀏覽器和小米上的獵豹瀏覽器都沒(méi)有問(wèn)題
回答4：body在一些瀏覽器上，不作為root元素，也就是說(shuō)root元素是沒(méi)有寬高視圖盒子等屬性的，只有非root處理body的瀏覽器才能支持body的ofh；但是在一些瀏覽器上是作為root處理的，這就造成了body無(wú)法隱藏子元素或者說(shuō)定寬；你可以試一下支持:root選擇符的基本都沒(méi)有這個(gè)問(wèn)題；
所以：給你的解決方案【敲黑板】：1，Dom的動(dòng)畫結(jié)構(gòu)要和表現(xiàn)結(jié)構(gòu)盡可能分開(kāi)；比如：獨(dú)立嵌套一層作為動(dòng)畫層；減少動(dòng)畫中間過(guò)程的運(yùn)算量；(結(jié)合你這個(gè)案例：就是body以下再套一層#slideLeft定寬)；2，在移動(dòng)端；如果可能，請(qǐng)使用transform:translate(100%,0);來(lái)完成平面動(dòng)畫；別用posa+left||right的動(dòng)畫;結(jié)合以下案例就是#slideLeft{transform:translate(100%,0)}
回答5：@golden_freeman_china 很抱歉，只能采納一個(gè)人的答案，感謝您的回復(fù)。目前的解決方案是外加一層容器做整體內(nèi)容的包裹，內(nèi)部絕對(duì)定位元素以該包裹容器做定位。問(wèn)題解決，結(jié)貼。
相關(guān)文章：
1. javascript - immutable配合react提升性能？2. javascript - sublime快鍵鍵問(wèn)題3. javascript - nodejs關(guān)于進(jìn)程間發(fā)送句柄的一點(diǎn)疑問(wèn)4. Apache 已經(jīng)把網(wǎng)站根目錄的改為allow from all了，但是服務(wù)器還是不能訪問(wèn)？5. 實(shí)現(xiàn)bing搜索工具urlAPI提交6. javascript - 移動(dòng)端上不能實(shí)現(xiàn)拖拽布局嗎？7. vue.js - Vue 如何像Angular.js watch 一樣監(jiān)聽(tīng)數(shù)據(jù)變化8. phpstudy8.1支持win11系統(tǒng)嗎？9. 配置Apache時(shí)，添加對(duì)PHP的支持時(shí)語(yǔ)法錯(cuò)誤10. css - 寫頁(yè)面遇到個(gè)布局問(wèn)題，求大佬們幫解答，在線等，急！~
網(wǎng)公網(wǎng)安備