如何防止用户在可滚动的 div 内向左/向右滚动时转到上一页/下一页？

Question

我遇到了这个相当轻微但非常烦人的用户体验问题。

其中一个页面需要一个非常宽的表格，我将它放在一个可滚动的 div 中。

我遇到的问题是，当用户在 Mac 上使用触控板向左或向右滚动时，如果他们继续尝试向右滚动，他们通常会意外触发 Chrome 中的“转到下一页/最后一页”行为/在他们已经走到桌子边缘之后离开。

有什么方法可以在鼠标悬停在特定 div 上时禁用两指前进/后退触控板行为？

CSS:

.scrollable {
  height: 100%;
  overflow-y: scroll;
  width: 100%;
  overflow-x: scroll;
}

HTML:
 <div class="scrollable" id="tableHere">
   <table>
      -- a really wide table --
   </table>
 </div>

Answer 1

简单的回答不，你不能这样做，你可以做的是将滚动 div 放入循环中，就像用户滚动到 div 的末尾并再次滚动移动滚动以重新开始一样