scroll-view scroll through to prevent scrolling
A common problem is to prevent scrolling from page pop-ups. Here is a brief introduction to a solution to the mini program scroll-view
Commonly used prevent scrolling
In pop-up windows without scroll-view, setting catchtouchmove empty event for elements with position absolute or fixed can prevent pages under pop-up windows from scrolling due to events
<view catchtouchmove="doNothing"></view>
You can also write catchtouchmove directly, which is equivalent to binding an event with the event named true
Problem scenario
In applets, in the class 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 the page itself from scrolling.
Solution
Since it is impossible to simply prevent events from penetrating, think of a solution on the scrollable elements of the page:
Page scrolling elements
A simple layout in a mini program. When the page content exceeds one screen, the scrolling element is page.
How to keep the page from scrolling
Set the height of the page to 100%, put a view on the outermost layer of the page, and add a class to the style when opening the pop-up window. Set the height of the page to 100%, and overflow: hidden to stop scrolling.
Set isStopBodyScroll to true when opening the pop-up window, and set to false when closing.
<view class="{{isStopBodyScroll ? 'scroll-lock' : ''}}">
<!-- Page content -->
</view>
.scroll-lock {
height: 100%;
overflow-y: hidden;
}
Existing problems
This way the setting page will return to the top. I hope there is a better solution or official support for this problem.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.