如何实现Notion表格式行外悬停触发侧边操作按钮

核心思路 #

不局限于监听表格行的hover事件，转而监听整个文档的鼠标移动，实时计算光标位置对应的表格行——只要光标落在某行的垂直高度范围内，无论是否在表格内部，都触发该行的操作按钮显示。

具体实现步骤 #

1. 页面结构与基础样式 #

先准备简化版的表格结构，操作按钮默认隐藏：

<table class="notion-table">
  <tbody>
    <tr class="table-row" data-row-id="1">
      <td>第一行内容</td>
      <td>辅助内容</td>
      <td class="action-buttons">
        <button>编辑</button>
        <button>删除</button>
      </td>
    </tr>
    <tr class="table-row" data-row-id="2">
      <td>第二行内容</td>
      <td>辅助内容</td>
      <td class="action-buttons">
        <button>编辑</button>
        <button>删除</button>
      </td>
    </tr>
  </tbody>
</table>

基础CSS设置：

/* 默认隐藏操作按钮 */
.action-buttons {
  opacity: 0;
  transition: opacity 0.2s ease;
}
/* 激活状态下显示按钮 */
.table-row.active .action-buttons {
  opacity: 1;
}

2. JavaScript逻辑实现 #

// 缓存表格行元素，避免重复DOM查询
const tableRows = document.querySelectorAll('.table-row');
let currentActiveRow = null;

// 监听文档的鼠标移动事件
document.addEventListener('mousemove', (e) => {
  const mouseY = e.clientY;
  let matchedRow = null;

  // 遍历所有行，判断光标是否在该行的垂直范围内
  tableRows.forEach(row => {
    const rowRect = row.getBoundingClientRect();
    // 光标Y坐标落在该行的顶部与底部之间
    if (mouseY >= rowRect.top && mouseY <= rowRect.bottom) {
      matchedRow = row;
    }
  });

  // 更新激活行状态
  if (matchedRow && matchedRow !== currentActiveRow) {
    // 清除上一行的激活状态
    currentActiveRow?.classList.remove('active');
    // 设置当前行为激活状态
    matchedRow.classList.add('active');
    currentActiveRow = matchedRow;
  } 
  // 光标不在任何行范围时，清除激活状态
  else if (!matchedRow && currentActiveRow) {
    currentActiveRow.classList.remove('active');
    currentActiveRow = null;
  }
});

3. 优化建议 #

• 性能优化：如果表格行数较多，用节流函数（比如自定义或第三方库的节流方法）包裹mousemove的处理逻辑，减少触发频率，避免页面卡顿。
• 滚动兼容：getBoundingClientRect()会自动计算元素相对于视口的位置，表格滚动时无需额外处理偏移量。
• 移动端适配：若需支持触摸设备，可监听touchmove事件，用e.touches[0].clientY获取触摸位置，逻辑与鼠标事件一致。

原理说明 #

通过getBoundingClientRect()获取每一行的视口坐标（top和bottom），对比鼠标的Y轴位置，即可判断光标是否落在该行的垂直高度范围内，从而实现跨表格范围的悬停触发效果。

内容的提问来源于stack exchange，提问作者sangmin park