小小弹窗之我大决战，穿透or滚动，划破天际或不染尘埃

前端

2023-05-17 23:55:29

自定义弹窗的滚动问题：终极指南

引言

在小程序开发中，自定义弹窗的滚动问题经常困扰着开发者。当用户打开弹窗时，背景内容会随着滚动条滚动，或者当用户滚动页面时，弹窗也会随之滚动，这会严重影响用户体验。本文将深入探讨这些问题并提供全面的解决方案。

穿透问题

症状： 当自定义弹窗打开时，背景内容会随着滚动条滚动。

原因： 此问题是由弹窗的父元素未设置 position: fixed 属性引起的。

解决方案：

在弹窗打开时，动态为其父元素添加 fixed 类。
在弹窗关闭时，动态从其父元素移除 fixed 类。

滚动条滚动问题

症状： 当用户滚动页面时，自定义弹窗也会随之滚动。

原因： 此问题是由弹窗的父元素设置了 position: fixed 属性引起的。

解决方案：

在用户滚动页面时，动态从弹窗的父元素移除 fixed 类。
在用户停止滚动时，动态为弹窗的父元素添加 fixed 类。

实现

HTML 代码：

<view class="page-container">
  <!-- 弹窗父元素 -->
  <view class="modal-parent">
    <!-- 弹窗 -->
    <view class="modal">
      <!-- 弹窗内容 -->
    </view>
  </view>
</view>

JavaScript 代码：

// 为弹窗父元素动态添加/移除 fixed 类
const toggleFixedClass = (isFixed) => {
  const modalParent = document.querySelector('.modal-parent');
  isFixed ? modalParent.classList.add('fixed') : modalParent.classList.remove('fixed');
};

// 在弹窗打开时添加 fixed 类
const addFixedClass = () => {
  toggleFixedClass(true);
};

// 在弹窗关闭时移除 fixed 类
const removeFixedClass = () => {
  toggleFixedClass(false);
};

// 在滚动页面时动态处理 fixed 类
const handleScroll = (e) => {
  if (e.detail.scrollTop > 0) {
    removeFixedClass();
  } else {
    addFixedClass();
  }
};