Recently, I was working on a tour guide project of the company, and the framework was [email protected]. When I was making a playlist pop-up frame, I encountered the problem of mask layer scrolling and pop-up content scrolling, which would lead to the bottom page content scrolling. After searching the Internet for solutions and practicing personally, I finally found the perfect solution that can be compatible with both H5 and applet. Of course, I also step on various pitches during the process. Some methods on the Internet didn’t work at all, so I decided to write an article by myself.
- It is easy to set the overflow property of the outermost View on the bottom page dynamically by displaying the state of the pop-up window. When popup window shows the document. The body. The style.css. Overflow = ‘hidden’; When popup window hidden document. The body. The style.css. Overflow = ‘insensitive’;
- Since the applet has no DOM structure, the above scheme is of course useless (that’s tsundere). Small program to be divided into two steps to solve the problem, first mask mask will slide through the problem, this can be used to Taro CatchMove property to solve, the official document also said, see the picture below. Then, we need to change the outermost View of the popup window to ScrollView. In this way, we need to add a View to the outer layer of ScrollView and catchMove attribute. CatchMove: scrollView does not support this attribute.
Note: The catchMove property of Taro is only supported in Taro 3.0.21
As described above, the Taro popover scrolling through problem was solved perfectly. Compatible with both H5 and small program.