Background: Many modal requirements in business development to prevent scrolling penetration were not supported in earlier versions of TARO3 due to design issues. Officials offer the following two solutions.

Excerpt from the taro website

Solution testing

1. Scheme 1: Conclusion first, most scenes are useless. Many pages are required by long pages, which require interaction such as scrolling and ceiling lighting, so set overflow: hidden; height: 100vh; Causes the page to scroll to the top. Not recommended

2. Plan 2: Upgrade the Taro version, which is not friendly to projects using the earlier version of Taro. Although Taro supports upgrading projects with the command Taro Update, there are some dependency conflicts that cause compilation problems. Linaria, for example, which uses the style-component solution in the Taro project, has compilation conflicts that are difficult to resolve (possibly ina later version, but not as of the current copywriting editor). What about new projects? I tested it with the 3.0.26 package (officially supported in 3.0.21). It works. If there is no problem with the project upgrade process, just upgrade it.

Other options

1, ScrollView, scrollY parameter can control whether to scroll, but if the use of ScrollView will have layout, API, unpredictable bugs and other reasons. For example, the ScrollView may limit the layout of your swiping and tabbing (e-commerce, etc.). Second: pageScrollTo and other API is not invalid. Third, if you use Input in a ScrollView, it will cause the text in the Input to be scrambled when sliding. (Encountered in actual projects. Confirm wechat bug)

Based on the above reasons and their own scene problems, the final adoption of the following schemeCopy the code

Build a native widget in taro using the native CatchTouchMove event. The following code

//frozen-zero.wxml <view id="{{id}}" class="'frozen-zero' {{className}}" catchtouchmove="move"> <slot></slot></view>//frozen-zero.json { "component": true, "usingComponents": {}}//fronzen-zero.js Component({ properties: { id: { type: String, value: '' }, className: { type: String, value: '' } }, methods: { move: function() {} }})//frozen-zero.wxss .frozen-zero { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; } / / using const demo () = = > {const [needPreventrollingpenetration] = useState (true) return needPreventrollingpenetration ? <frozen-zero> contents </frozen-zero> : <View> contents </View>}Copy the code

Finally: I hope I can help small program developers who are in hot water. If you have other difficult scenarios, please leave a message