uni-app弹出框如何花式禁止滚动穿透？满满的干货！

前端

2023-02-25 06:50:18

滚动穿透：在 Uni-app 中的简明指南

简介

在构建移动应用程序时，滚动穿透是一个常见的挑战。当应用程序中某个组件内部的内容滚动到尽头时，用户继续滑动会导致整个页面或应用程序滚动。这会导致用户界面混乱，影响用户体验。

理解滚动穿透

滚动穿透发生的原因是 Web 浏览器默认允许元素和容器在不同的滚动层次上独立滚动。当内部元素滚动到尽头时，浏览器会将滚动事件传递到父容器。如果不加以控制，这会导致父容器意外滚动。

在 Uni-app 中解决滚动穿透

在 Uni-app 中，有几种方法可以解决滚动穿透问题。

1. 使用 CSS 样式

CSS 样式提供了控制滚动行为的属性：

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

.component {
  overflow: hidden; /* 禁止组件内滚动 */
}

2. 使用 JavaScript 代码

JavaScript 代码还可以用于阻止滚动事件：

// 禁止页面滚动
document.body.style.overflow = 'hidden';

// 禁止组件内滚动
const component = document.querySelector('.component');
component.style.overflow = 'hidden';

3. 使用框架

Uni-app 框架提供了内置功能来处理滚动穿透。以下是如何使用 uni-app 框架来解决这个问题：

// 在组件中使用
mounted() {
  uni.getSystemInfo({
    success: (res) => {
      this.statusBarHeight = res.statusBarHeight
    },
  })
},

methods: {
  // 禁止滚动穿透
  stopScroll() {
    uni.stopPullDownRefresh()
    document.documentElement.style.overflow = 'hidden'
    document.body.style.overflow = 'hidden'
  },

  // 允许滚动
  allowScroll() {
    document.documentElement.style.overflow = 'auto'
    document.body.style.overflow = 'auto'
  },
}