The problem that the mobile terminal element is located outside the visible area of the page and the excess part is hidden outside the visible area

The problem that the mobile terminal element is located outside the visible area of the page and the excess part is hidden outside the visible area

The following problem occurs during PC-side and mobile-side pages:

When you set the width and height of the body to 100%, you can use absolute positioning to position the element outside the page. Then, you can run the element to the page as an animation based on different situations, set overflow: hidden for the body. When the PC side page is accessed, the elements are not outside the page, and no scroll bar is displayed. However, it is invalid when the mobile side page is moved. by sliding the screen, you can also display the elements located outside the page, so that the hidden elements cannot be exceeded;

The following two methods can be used to solve this problem on mobile terminals:

I. Change the Positioning Method

Set the width and height of 100% for the body and the overflow: hidden remains unchanged. The change is to use position: fixed to locate the elements that need to be hidden beyond the visible area;

<! DOCTYPE html> 
 
2. Add a div package
Add a div with a width and height of 100% to the body and set overflow: hidden for this div. Then, you need to refer to this div to locate the hidden elements beyond the visible area;
<! DOCTYPE html> 
/** I hope you will be informed