移动端页面滚动解锁之旅：巧用JS事件监听解决“锁屏风波”

2024-03-03 22:05:34

在移动端解锁页面滚动：一次"锁屏风波"的解决之旅

引言

在当今移动端优先的时代，确保网站和应用在各个设备上都能流畅使用至关重要。然而，在最近的一个项目中，我遇到了一个棘手的挑战：如何在PC端保持页面正常滚动，同时在移动端也能通过手势流畅滑动。本文将深入探讨这个问题，分享我所尝试的解决方案，并阐述最终的解决方法。

问题的根源：Vant组件的"锁屏"属性

在项目中，我使用了流行的Vant UI组件库。然而，我发现它的Popup组件有一个名为"lock-scroll"的属性，默认值为true。这意味着当Popup打开时，其内部元素可以滚动，而页面本身会被锁定，无法滚动。

移动端的难题

在PC端，这个问题并不明显，因为用户通常使用鼠标或触控板来滚动页面。但是，在移动端，手势滑动是主要的交互方式。当Popup打开时，手势滑动就会失效，导致页面无法滚动，严重影响用户体验。

探索各种解决方案

为了解决这个问题，我尝试了多种方法：

修改"lock-scroll"属性： 这是最直接的解决方案，但会导致Popup内部无法滚动，也无法满足需求。
使用CSS属性： 尝试使用"overflow:auto"和"touch-action:none"等CSS属性来控制滚动行为，但效果不理想。
创建自定义组件： 考虑创建自定义组件来替代Vant的Popup组件，但这样做工作量较大，且无法保证兼容性。

巧用JS事件监听：灵光乍现

经过一番思索，我终于想到一个巧妙的解决方案：使用JS事件监听。通过监听"touchstart"和"touchmove"事件，我可以检测到用户的滑动意图。当Popup打开时，我会阻止这些事件传递到页面，从而防止页面滚动。而当Popup关闭时，我将重新启用这些事件，恢复页面正常的滚动行为。

代码示例：

// 创建一个监听touch事件的函数
function handleTouchEvent(e) {
  e.preventDefault();
  e.stopPropagation();
}

// Popup打开时，添加touch事件监听
popup.addEventListener('touchstart', handleTouchEvent);
popup.addEventListener('touchmove', handleTouchEvent);

// Popup关闭时，移除touch事件监听
popup.addEventListener('close', () => {
  popup.removeEventListener('touchstart', handleTouchEvent);
  popup.removeEventListener('touchmove', handleTouchEvent);
});