Floating layer rolling problem

Time:2020-2-17

Introduction

Useposition transformRealize the H5 floating layer effect that slides out from the right, but when the mobile browser slides left and right, the page produces left and right scrollbars, and the floating layer also comes out. This is the question page. The mobile terminal accesses it as follows:

Floating layer rolling problem

This phenomenon should not appear, the problem is easy to solve, but why? After thinking about it, I seem to know the relevant points, but I can’t explain them clearly, so I’ll sort them out here.

  • Origin
  • My GitHub

Reason

It’s natural to think of rollingoverflowProperties, let’s first understand.

overflowProperty specifies whether the content of the block container element is clipped when it overflows, yesoverflow-xandoverflow-yAbbreviation.

Name overflow
Available value visible、hidden、scroll、auto、inherit
Default value visible
Apply to Block level container and box with formatting context established
Inheritance nothing
  • visible: this value indicates that the content will not be cut and may render outside the box.
  • hidden: this value indicates that the content is cut, and a scrolling user interface should not be provided to view content outside the clipping area.
  • scroll: this value indicates that the content is clipped, and if the user agent uses a scrolling mechanism (such as a scroll bar or pane) that is visible on the screen, the mechanism should be displayed for the box regardless of whether any content in the box is clipped. This is to avoid any problems caused by the appearance and disappearance of scrollbars in a dynamic environment. When this value is specified and the target media is printed, the overflowed content may or may not be printed. When used in table boxes, this value follows thevisibleIt has the same effect.
  • auto: this value indicates a dependency on the user agent, but a scrolling mechanism should be provided for the overflow box. When used in table boxes, this value follows thevisibleIt has the same effect.

Through the above understanding, I want to correct the value as followsautoThe browser will automatically decide whether to generate scrolling based on the content. This seems to be the case from the perspective of phenomenon, but not from the perspective of standard, just suggestions. If the user agent does not provide scrolling, it does not, and does not necessarily, depend on the user agent.

Let’s analyze the above problems. The main structures and styles are as follows:

<!doctype html>
<html>
  <body>
    <div class="pop"></div>
  </body>
</html>
html {overflow-x: hidden;}
html,body { height: 100%; }
body { position: relative; }
.pop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  transform: translateX(100%);
}

bodyNo explicit settingsoverflowThe default value isvisible, due to floating layer usetransformBeyond the visible area, let’s make sure firstbodyOfoverflowWhether it is valid.

Set upbodyThe width of the effect page is as follows:

Floating layer rolling problem

Found coincidenceoverflow: visibleThe effect does not produce left and right scrollbars.

Then there is the following conjecture:As long as beyond the visual area, rolling will occur。 On the basis of the front, set the floating layertransformBeyond the visual area, this is the effect page. The mobile terminal accesses as follows:

Floating layer rolling problem

It turns out, as you might have guessed, that it wasn’tbodyScrolling is generated, but viewport generates scrolling. Continue to search for information and find the following standard description:

The user agent must set theoverflowProperty is applied to the viewport. When the root element is an HTML element and itsoverflowThe value isvisible, and it hasbodyElement as a descendant, the user agent mustoverflowThe property value of applies to the viewport. IfvisibleApplied to a viewport, it must be interpreted asauto。 The element from which the value is propagated must have oneoverflowUsed values arevisible

From the above description and actual test, it can be inferred that theoverflowProperty applied to the viewport, resulting in scrolling. Set the bodyoverflow-x: hidden, it is found that there will be no left-right scrolling. Mobile access is as follows:

Floating layer rolling problem

Epilogue

Four or five browsers tested on IOS and Android will scroll left and right, but some chrome browsers on Android phones don’t scroll, such as Hongmi 6. There is another point: PC browser will not produce left and right scrolling.

In addition, in fact, the standard is not very clear. In addition, the standard is one thing, and each implementation does not necessarily conform to the standard.

All of the above opinions are based on personal data and practical tests. It’s hard to say whether it is true or not, but they can be used as a direction of thinking.

Reference material

  • MDN overflow
  • overflow
  • overflow Draft

Recommended Today

(2) start with mybatis

Prospect review In the MVP version, we have implemented a basic running mybatis. As the saying goes, everything is difficult at the beginning, then difficult in the middle. The plug-in mechanism of mybatis is the second soul besides dynamic proxy. Let’s experience the pain and happiness of this interesting soul~ The role of plug-ins In […]