前端开发：平滑禁用页面滚动，告别 overflow:hidden 的视觉跳动

本文探讨了在使用 `overflow:hidden` 禁用页面滚动时可能出现的页面抖动问题。针对这一常见痛点，教程提供了两种优雅的替代方案：通过 javascript 事件监听器阻止滚动事件，以及利用 css `touch-action: none` 属性。这些方法能有效避免滚动条移除导致的布局偏移，提升用户体验。

在构建模态框（Modal）或侧边抽屉等交互组件时，我们常常需要在组件显示时禁用页面的背景滚动，以确保用户注意力集中在当前组件上。最直观的做法是为 body 元素设置 overflow: hidden。然而，这种方法有一个常见的副作用：当滚动条被移除时，页面内容会向右跳动，反之当滚动条恢复时，页面又会向左跳动，造成不佳的视觉体验，即所谓的“jank”现象。

理解 overflow:hidden 带来的问题

当浏览器渲染一个带有滚动条的页面时，滚动条会占据一定的宽度（通常是 15-17 像素）。如果将 body 的 overflow 属性从 auto 或 scroll 切换到 hidden，浏览器会立即移除滚动条。此时，页面内容的可用宽度会增加滚动条原本占据的宽度，导致整个页面内容向右平移，以填充这部分空间。这就是页面抖动的根本原因。

为了避免这种视觉上的跳动，我们需要寻找一种方法，既能禁用页面滚动，又能保持滚动条的存在，或者至少不引起布局上的变化。以下是两种有效的替代方案。

解决方案一：通过事件监听器阻止滚动

这种方法的核心思想是，不移除滚动条，而是通过 JavaScript 拦截并阻止所有可能触发页面滚动的事件的默认行为。这样，滚动条依然存在，但用户无法通过鼠标滚轮、触摸滑动或键盘方向键来滚动页面。

立即学习“前端免费学习笔记（深入）”；

实现原理

我们监听 scroll、mousewheel 和 touchmove 等事件。当这些事件被触发时，我们调用 event.preventDefault() 方法，阻止其默认的滚动行为。

示例代码

/**
 * 阻止滚动事件的默认行为
 * @param {Event} e - 滚动事件对象
 */
const ignoreScroll = (e) => {
    e.preventDefault();
};

/**
 * 禁用页面滚动
 */
function disablePageScroll() {
    // 针对桌面浏览器，阻止鼠标滚轮和键盘滚动
    document.addEventListener('scroll', ignoreScroll, { passive: false });
    document.addEventListener('mousewheel', ignoreScroll, { passive: false });
    // 针对移动设备，阻止触摸滑动
    document.addEventListener('touchmove', ignoreScroll, { passive: false });
    // 也可以考虑阻止键盘方向键事件，如果需要更全面的禁用
    // document.addEventListener('keydown', (e) => {
    //     if (['ArrowUp', 'ArrowDown', 'PageUp', 'PageDown', 'Home', 'End', 'Space'].includes(e.key)) {
    //         e.preventDefault();
    //     }
    // }, { passive: false });
}

/**
 * 启用页面滚动
 */
function enablePageScroll() {
    document.removeEventListener('scroll', ignoreScroll);
    document.removeEventListener('mousewheel', ignoreScroll);
    document.removeEventListener('touchmove', ignoreScroll);
    // document.removeEventListener('keydown', /* 对应的键盘事件处理函数 */);
}

// 示例用法：在模态框显示时调用 disablePageScroll()
// 在模态框关闭时调用 enablePageScroll()

注意事项：

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

27

查看详情

• { passive: false }: 在 addEventListener 中设置 passive: false 至关重要。默认情况下，某些触摸和滚轮事件监听器可能是 passive: true，这意味着它们不能调用 preventDefault()。明确设置为 false 才能阻止默认行为。
• 事件覆盖: 需要覆盖多种滚动事件，以确保在不同设备和交互方式下都能禁用滚动。scroll 事件在元素滚动时触发，mousewheel 针对鼠标滚轮，touchmove 针对触摸滑动。
• 性能: 大量或频繁的事件监听可能对性能有轻微影响，但在模态框场景下通常可以接受。
• 焦点管理: 禁用滚动后，如果模态框内部有可滚动内容，应确保其内部滚动不受影响，通常通过将 overflow: auto 应用到模态框内部的特定元素来实现。

解决方案二：利用 CSS touch-action 属性

touch-action 是一个 CSS 属性，它允许开发者指定触摸屏用户如何与元素进行交互。通过将其设置为 none，可以阻止所有默认的平移（pan）和捏合（pinch）手势。这对于移动设备上的触摸滚动禁用非常有效。

实现原理

将 touch-action: none 应用到 body 或需要禁用滚动的容器元素上，可以阻止触摸事件触发的滚动行为。

示例代码

/* 当模态框显示时，为 body 添加一个类 */
body.no-scroll-touch {
    touch-action: none;
}

/**
 * 禁用页面触摸滚动（通过 CSS）
 */
function disableTouchScrollCSS() {
    document.querySelector("body").classList.add("no-scroll-touch");
}

/**
 * 启用页面触摸滚动（通过 CSS）
 */
function enableTouchScrollCSS() {
    document.querySelector("body").classList.remove("no-scroll-touch");
}

// 示例用法：
// disableTouchScrollCSS(); // 模态框显示时
// enableTouchScrollCSS();  // 模态框关闭时

注意事项：

• 适用范围: touch-action: none 主要针对触摸设备。它不能阻止鼠标滚轮或键盘触发的滚动。因此，如果需要全面的滚动禁用，通常需要结合解决方案一。
• 兼容性: 现代浏览器对 touch-action 属性的支持良好。
• 简单性: 对于仅需禁用触摸滚动的场景，这种方法非常简洁高效。

综合考量与最佳实践

在实际开发中，为了提供最佳的用户体验，我们通常会根据目标设备和交互需求，选择或组合使用上述方法。

• 桌面端: 主要依赖鼠标滚轮和键盘滚动。解决方案一（事件监听器）是更全面的选择。
• 移动端: 主要依赖触摸滑动。touch-action: none 简洁有效，但结合事件监听器可以提供更健壮的禁用。
• 推荐组合方案:
  • 模态框显示时:
    1. 调用 disablePageScroll() 阻止鼠标/键盘滚动。
    2. 为 body 添加一个类（如 no-scroll-touch），应用 touch-action: none 样式，以阻止触摸滚动。
    3. 可选但推荐: 如果需要防止背景页面在模态框出现时被点击或焦点转移，可以考虑在 body 上添加 position: fixed; width: 100%; height: 100%; 并在模态框容器上设置 overflow: auto; 来创建自己的滚动区域。这可以彻底隔离模态框与背景页面的交互，但会涉及更复杂的布局调整。
  • 模态框关闭时:
    1. 调用 enablePageScroll() 恢复滚动。
    2. 从 body 移除 no-scroll-touch 类。

这种组合方案能够确保在各种设备和交互方式下，页面滚动都能被平滑且有效地禁用，同时避免了因滚动条移除而导致的页面抖动问题。

总结

告别 overflow:hidden 带来的页面抖动，是提升用户体验的一个重要细节。通过采用 JavaScript 事件监听器或 CSS touch-action 属性，我们可以更优雅、更专业地管理页面的滚动行为。理解这些方法的原理和适用场景，并根据实际需求进行组合应用，将帮助我们构建出更加流畅和用户友好的前端应用。选择最适合项目需求的方法，并始终关注用户的交互体验，是前端开发中不可或缺的实践。

以上就是前端开发：平滑禁用页面滚动，告别 overflow:hidden 的视觉跳动的详细内容，更多请关注php中文网其它相关文章！