阻止表格滚动触发布rowser后退

前端

2023-09-17 03:22:24

每次横向滚动表格时，触发浏览器的后退行为会令人沮丧，破坏用户体验。尤其是在模拟滚动条而非浏览器原生滚动条时，这个问题会更加明显，因为滚动操作只涉及位置同步，不触发浏览器滚动事件。

为什么会发生这种情况？

当我们使用触摸板或鼠标在表格上水平滚动时，浏览器会将此动作解释为后退导航。这是因为浏览器将水平滚动视为页面回滚手势的一部分。

解决方案

要阻止表格滚动触发浏览器后退行为，我们可以采取以下措施：

使用CSS禁用后退导航：
```
body {
  touch-action: none;
}
```
此CSS规则将禁用浏览器的所有后退导航手势，包括水平滚动。但是，它也会阻止用户在页面上正常滚动，因此这可能不是一个理想的解决方案。
使用JavaScript阻止默认后退行为：
```
document.addEventListener("touchmove", function(e) {
  e.preventDefault();
});
```
此JavaScript代码将阻止触摸设备上的默认后退行为。但是，它仍然允许用户使用鼠标进行后退导航。

使用带有覆盖层的伪元素：

.table-container {
  overflow: auto;
}
.table-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}