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

Question

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

ringa_lee · Answer

Because I have canceled the default behavior of the browser before, this problem has never occurred, so I did a test all afternoon. Let’s complain about the fact that the browsers on vivo and Huawei really have a lot of compatibility issues.
Find a sentence portal from another forum

An absolutely positioned descendant element with part of the content outside the box. But the excess part is not always clipped. The content of descendant elements will not be clipped by the overflow setting of the ancestor element between the descendant element and its containing block.
Explanation: The containing blocks (Containing blocks) of the descendant elements of the element are the entire viewport (viewport) or the ancestor elements of the element, and the content will not be clipped.

But the direct parent of the menu block in the code, that is, body, has relative positioning turned on, and body has set overflow-x:hidden, so logically it will be hidden. But due to the problems I encountered before, I wonder if the browsing area handles viewport differently, causing the body to also belong to the root-level containing block? (No verification) So I hope it can be solved by wrapping it with another layer of p.
The html structure is as follows


    
    这里写原有内容

No other changes will be made to the style part

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

Others: There seem to be duplicate styles in your style sheet, which need to be optimized.
So many answers first. We will add the general processing of other mobile terminals later.

巴扎黑 · Answer

Thank you for the invitation. Well, sorry for my limited understanding. What is the problem after you have said so much? I linked to your question page...still confused.

巴扎黑 · Answer

There is no problem when using QQ Browser for iOS and Cheetah Browser on Xiaomi

大家讲道理 · Answer

The body is not used as a root element on some browsers, which means that the root element does not have attributes such as width and height, view box, etc. Only non-root browsers that handle the body can support the ofh of the body; but on some browsers It is processed as root, which means that the body cannot hide child elements or have a fixed width; you can try supporting the :root selector, which basically does not have this problem;

So: The solution for you [knock on the blackboard]:
1. The animation structure of Dom should be separated from the performance structure as much as possible; for example: nest an independent layer as the animation layer; reduce the amount of calculations in the middle process of animation ;(Based on your case: just add a layer of #slideLeft below the body to set the width);
2, on the mobile side; if possible, please use transform:translate(100%,0); to complete the flat animation; don't Use posa+left||right animation; combined with the following case, it is #slideLeft{transform:translate(100%,0)}

PHPz · Answer

@golden_freeman_china Sorry, I can only accept one person's answer. Thank you for your reply.
The current solution is to add an additional layer of containers to wrap the overall content, and the internal absolutely positioned elements are positioned using the wrapping container. Problem solved, posted.

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial