Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use scroll-view to achieve scrolling penetration and stop scrolling in WeChat Mini Programs". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use scroll-view to achieve scrolling penetration and stop scrolling in WeChat Mini Programs.

Scroll-view scrolling through, preventing scrolling

It is a common problem that page pop-up windows prevent scrolling. Here is a brief introduction to a solution of Mini Program scroll-view.

Commonly used ways to prevent scrolling

In the pop-up window that does not use scroll-view, setting the catchtouchmove null event for the element of absolute or fixed for position can prevent the page under the pop-up window from scrolling through the event.

You can also write catchtouchmove directly, which is equivalent to binding an event named true

Problem scenario

In Mini Program, in the pop-up layout of absolute or fixed. To display scrollable elements such as lists, long text paragraphs, etc., you must use the scroll-view component, which cannot prevent scrolling of the page itself

Solution.

Since you can't simply prevent event penetration, think of something in the scrollable elements of the page:

Page scrolling element

In the simple layout of Mini Program, when the content of the page exceeds one screen, the scrolling element is page

How to keep the page from scrolling

Set the height of page to 100%, put a view on the outermost layer of the page, add a style through a class when opening the pop-up window, and set the height of the page to 100% hidden to stop scrolling.

Set isStopBodyScroll to true when the pop-up window is opened and false when it is closed

.scroll-lock {height: 100%; overflow-y: hidden;}

Existing problems

This setting page will go back to the top, looking forward to a better solution or official support for the problem.

Thank you for your reading, the above is the content of "how to use scroll-view to achieve scrolling penetration and stop scrolling in WeChat Mini Programs". After the study of this article, I believe you have a deeper understanding of how to use scroll-view to achieve scrolling penetration and stop scrolling in WeChat Mini Programs, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.