前端 - 移动端绝对定位超出无法隐藏导致body可以滚动

Question

目前在弄公司移动端改版问题中，本人css菜鸟，对移动端更是不熟悉，遇到这种PC上无问题，移动端出问题时真心无力。 测试连接： body滚动问题地址 测试浏览器： android手机 上 QQ浏览器 UC 浏览器 或者微信扫描打...

ringa_lee · Answer

因為以前都把瀏覽器預設行為取消掉了，沒出現過這種問題，所以做了一個下午測試。吐槽一下vivo和華為上的瀏覽器真的有很多相容性問題。
從別的論壇找到一句話傳送門

一個絕對定位的子孫元素，部分內容在盒子外。但超出的部分不是總是會被剪裁。子孫元素的內容就不會被子孫元素和其包含塊之間的祖先元素的overflow的設定所剪裁。
解釋：元素的子孫元素的包含塊（Containing blocks）是整個視窗（viewport）或是該元素的祖先元素，內容將不會被剪裁。

但是程式碼中選單區塊的直接父級即body開啟了相對定位，且body設定了overflow-x:hidden,按照道理說是會被隱藏掉的。但由於以前遇到的問題，我猜想是不是瀏覽區對viewport的處理不一樣，導致body也屬於根一級的包含塊？ (沒做驗證)所以希望再包一層p來解決。
html結構如下


    
    这里写原有内容

樣式部分其他不做修改

#wrap{
        overflow-x: hidden;
        position: relative;    
    }

其他：你的樣式表裡好像有重複樣式，還要優化下。
先答這麼多。等下補充別的移動端的一般處理。

巴扎黑 · Answer

謝邀。那個，恕我理解能力有限，樓主你說這麼多，到底是什麼問題？我連結到你的問題頁面...還是懵逼。

巴扎黑 · Answer

用了iOS的QQ瀏覽器和小米上的獵豹瀏覽器都沒有問題

大家讲道理 · Answer

body在某些瀏覽器上，不作為root元素，也就是說root元素是沒有寬高視圖盒子等屬性的，只有非root處理body的瀏覽器才能支援body的ofh；但是在一些瀏覽器上是作為root處理的，這就造成了body無法隱藏子元素或說定寬；你可以試試看支援:root選擇符的基本都沒有這個問題；

所以：給你的解決方案【敲黑板】：
1，Dom的動畫結構要和表現結構盡可能分開；比如：獨立嵌套一層作為動畫層；減少動畫中間過程的運算量；(結合你這個案例：就是body以下再套一層#slideLeft定寬)；
2，在移動端；如果可能，請使用transform:translate(100%,0);來完成平面動畫；別用posa+left||right的動畫;結合以下案例就是#slideLeft{transform:translate(100%,0)}

PHPz · Answer

@golden_freeman_china 很抱歉，只能採納一個人的答案，感謝您的回覆。
目前的解決方案是外加一層容器做整體內容的包裹，內部絕對定位元素以該包裹容器做定位。問題解決，結貼。