要在隐藏滚动条的同时避免“焦点陷阱”（即键盘用户被困在某个区域内无法移出，或焦点进入后页面不滚动导致内容不可见），核心在于‌正确管理 tabindex、保留原生滚动能力、并提供清晰的焦点出口‌。

以下是具体的实施策略和代码示例：

一、核心原则：不要切断原生滚动能力

很多开发者为了隐藏滚动条，错误地使用了 overflow: hidden 或复杂的 JS 拦截，这往往是焦点陷阱的根源。

1. ‌保留 overflow: auto 或 scroll‌
   隐藏滚动条应仅通过 CSS 视觉样式实现（如 ::-webkit-scrollbar { display: none; } 或 scrollbar-width: none;），‌绝不能‌禁用滚动功能。

2. ‌避免使用 aria-hidden="true" 包裹可交互内容‌
   如果容器被标记为 aria-hidden，屏幕阅读器会忽略它，但键盘焦点可能仍然能进入（取决于浏览器实现），导致用户“听不到”却“陷进去”。

二、正确设置 tabindex 与焦点管理

1. 滚动容器本身：谨慎使用 tabindex

• ‌一般情况‌：如果滚动容器内包含自然的聚焦元素（如 <a>, <button>, <input>），‌不要‌给容器本身设置 tabindex="0"。让焦点自然流向内部的第一个子元素即可。

• ‌特殊情况‌：如果容器内没有自然聚焦元素，或者你需要确保容器获得焦点时自动滚动到视口（Scroll into view），可以设置 tabindex="-1" 并通过编程方式聚焦，或者设置 tabindex="0" 但必须配合明确的语义标签。

2. 防止焦点逃逸（针对模态框/弹窗内的滚动区）

如果滚动区域是模态框的一部分，你需要实现“焦点捕获”（Focus Trap），但这不等于“焦点陷阱”。焦点应该在模态框内的可交互元素之间循环，而不是卡死。

‌关键逻辑：‌

• 监听 Tab 和 Shift+Tab。

• 当焦点到达最后一个元素且按 Tab 时，将焦点移回第一个元素。

• 当焦点到达第一个元素且按 Shift+Tab 时，将焦点移回最后一个元素。

三、提供明确的“焦点出口”

避免陷阱的最有效方法是让用户知道如何离开。

1. ‌显式的关闭/返回按钮‌
   在滚动区域的顶部或底部放置一个明显的“关闭”或“返回”按钮，并确保它是可聚焦的。

2. ‌Esc 键支持‌
   监听 keydown 事件，当用户按下 Esc 时，关闭模态框或将焦点移出滚动区域，返回到触发该区域的按钮上。

四、实战代码示例

以下是一个兼顾‌隐藏滚动条‌、‌无障碍访问‌和‌避免焦点陷阱‌的完整示例：

HTML 结构

<!-- 触发按钮 -->

<button id="open-modal-btn">打开列表</button>

<!-- 模态框背景 -->

<div id="modal-overlay" class="modal-overlay" aria-hidden="true">

  <!-- 模态框内容 -->

  <div role="dialog" aria-modal="true" aria-labelledby="modal-title" class="modal-content">

    <h2 id="modal-title">产品列表</h2>

    <!-- 可滚动区域：隐藏滚动条但保留功能 -->

    <div class="scroll-container" tabindex="-1">

      <ul>

        <li><button>产品 1</button></li>

        <li><button>产品 2</button></li>

        <!-- ... 更多产品 ... -->

        <li><button>产品 50</button></li>

      </ul>

    </div>

    <!-- 明确的出口：关闭按钮 -->

    <button id="close-modal-btn" class="close-btn">关闭</button>

  </div>

</div>

CSS：隐藏滚动条

/* 隐藏滚动条但保留滚动功能 */

.scroll-container {

  max-height: 300px;

  overflow-y: auto; /* 必须保留 auto 或 scroll */

  /* Firefox */

  scrollbar-width: none; 

  /* IE/Edge 旧版 */

  -ms-overflow-style: none;

}

/* Webkit (Chrome, Safari, Edge) */

.scroll-container::-webkit-scrollbar {

  display: none;

}

/* 模态框基础样式 */

.modal-overlay {

  position: fixed;

  top: 0; left: 0; right: 0; bottom: 0;

  background: rgba(0,0,0,0.5);

  display: flex;

  justify-content: center;

  align-items: center;

  visibility: hidden;

  opacity: 0;

  transition: opacity 0.3s;

}

.modal-overlay.active {

  visibility: visible;

  opacity: 1;

}

.modal-content {

  background: white;

  padding: 20px;

  border-radius: 8px;

  max-width: 400px;

  width: 90%;

}

JavaScript：焦点管理与陷阱规避

const openBtn = document.getElementById('open-modal-btn');

const closeBtn = document.getElementById('close-modal-btn');

const modalOverlay = document.getElementById('modal-overlay');

const modalContent = document.querySelector('.modal-content');

const scrollContainer = document.querySelector('.scroll-container');

// 打开模态框

openBtn.addEventListener('click', () => {

  modalOverlay.classList.add('active');

  modalOverlay.setAttribute('aria-hidden', 'false');

  // 1. 将焦点移到模态框内的第一个可交互元素（或容器本身）

  // 这里我们选择聚焦到关闭按钮，或者滚动区域内的第一个按钮

  closeBtn.focus(); 

});

// 关闭模态框

function closeModal() {

  modalOverlay.classList.remove('active');

  modalOverlay.setAttribute('aria-hidden', 'true');

  // 2. 重要：将焦点返回到触发按钮，避免焦点丢失

  openBtn.focus();

}

closeBtn.addEventListener('click', closeModal);

// 3. Esc 键退出

document.addEventListener('keydown', (e) => {

  if (e.key === 'Escape' && modalOverlay.classList.contains('active')) {

    closeModal();

  }

});

// 4. 焦点捕获（防止焦点陷阱的关键）

modalContent.addEventListener('keydown', (e) => {

  if (e.key !== 'Tab') return;

  // 获取模态框内所有可聚焦元素

  const focusableElements = modalContent.querySelectorAll(

    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'

  );

  const firstElement = focusableElements;

  const lastElement = focusableElements[focusableElements.length - 1];

  if (e.shiftKey) {

    // Shift + Tab: 如果在第一个元素，跳到最后

    if (document.activeElement === firstElement) {

      e.preventDefault();

      lastElement.focus();

    }

  } else {

    // Tab: 如果在最后一个元素，跳到第一个

    if (document.activeElement === lastElement) {

      e.preventDefault();

      firstElement.focus();

    }

  }

});

五、避坑检查清单

1. ‌是否保留了 overflow: auto？‌

• ✅ 是：用户可以滚动，键盘方向键有效。

• ❌ 否：用户被困住，无法查看溢出内容。

2. ‌是否有明确的焦点出口？‌

• ✅ 是：有关闭按钮，支持 Esc 键。

• ❌ 否：用户只能刷新页面才能退出。

3. ‌焦点是否返回触发源？‌

• ✅ 是：关闭后焦点回到“打开”按钮。

• ❌ 否：焦点回到 body 或消失，用户迷失位置。

4. ‌是否误用了 aria-hidden？‌

• ✅ 是：仅在模态框关闭时设置 aria-hidden="true"。

• ❌ 否：在模态框打开时，错误地将背景内容设为 aria-hidden 但未管理焦点，导致键盘用户无法操作背景，但也无法感知模态框外的上下文（虽然这是模态框的预期行为，但需确保模态框内焦点管理正确）。

通过以上方法，你可以在保持界面简洁（隐藏滚动条）的同时，确保键盘用户和屏幕阅读器用户能够顺畅地导航和退出，彻底避免焦点陷阱。