How to disable iOS page bouncing in UniApp

UniApp is a cross-platform development framework that allows developers to develop applications on multiple platforms using one language (Vue.js). This includes the iOS platform, but during the development process, a common problem is that the iOS page bounces.

Page Bounce refers to the phenomenon of the page bouncing up and down. When the page length exceeds the view window, a bouncing effect will occur, which may affect the user experience. On IOS, Page Bounce is enabled by default for WebView, which also causes unexpected bounce effects to occur when developing UniApp applications. This article will introduce how to disable iOS page bouncing in UniApp.

IOS Bounce in UniApp

In UniApp, we can control the style of the entire page through CSS styles. During the development process, we will use the following CSS styles:

body {
  overflow: hidden;
  /* 禁止页面滚动 */
}

.container {
  height: 100vh;
  overflow-y: auto;
  /* 设置滚动区域 */
}

In iOS, you also need to set the WebView to avoid Page Bounce.

/* 禁止页面滚动 */
-webkit-overflow-scrolling: touch;

When your UniApp application is running in an iOS device, if you do not use -webkit-overflow-scrolling: touch; to set the WebView, the user will see the complete The situation where the Webview page is stretched and bent.

However, even if you use -webkit-overflow-scrolling:touch;, you will still encounter page bouncing in iOS devices. One reason is that when the page overflows, stretching and bending still occur.

In the example below, I will show you how to disable the IOS page bounce effect in UniApp.

body {
  overflow: hidden;
}

.container {
  height: 100vh;
  overflow-y: scroll;
  /* 使用滚动区域代替Webview滚动 */
  -webkit-overflow-scrolling: touch;
  /* IOS弹性 */
  position: relative;
  /* 相对位置 */
  overflow-x: hidden;
  /* X轴滚动 */
  -webkit-transform: translateZ(0);
  /* 3D加速 */
  -webkit-overflow-scrolling: touch;
}

Method to implement the effect of prohibiting IOS page bounce

In the above code, we first set the body overflow to hidden to prohibit page scrolling. Then, we use the .container class to replace the Webview scroll area, and use the scroll property, which compresses the scroll area to normal size, and the scroll area will not stretch and bend when the page overflows.

We can also use some other properties to completely disable iOS page bouncing. For example, setting the container's position to relative, X-axis scrolling to hidden, and -webkit-transform to translateZ(0) for 3D acceleration will completely prevent the bouncing phenomenon from occurring.

Conclusion

This article introduces how to disable the iOS page bouncing effect in UniApp. As developers continue to increase their use of UniApp, how to solve the iOS page bouncing problem will become a common problem. However, the methods provided in this article can help developers easily solve this problem and make UniApp applications more smooth and natural on iOS devices.

The above is the detailed content of How to disable iOS page bouncing in UniApp. For more information, please follow other related articles on the PHP Chinese website!