javascript - 有什么方法可以防止水平滚动触发 OS X Lion Safari 上的向后滑动手势？

Question

我正在开发一个在 div 元素中使用水平滚动的 UI(使用 overflow: scroll)。我不能向左滚动，因为它会启动回顾历史的动画。同样，当有要前进的网站时，我无法向右滚动。

它在其他浏览器上运行良好，包括 OS X Lion 上的 Chrome，它还支持滑动以返回历史记录。 (在我开发的某个时候，在 div 中滚动也适用于 Safari。我添加了事件处理程序和 html，这可能会破坏滚动，但我不知道是什么让它发生了变化。)

理想情况下，当在特定的 div 上滚动时，我想防止在历史记录中后退或前进(即使它已经结束。)

更新:我尝试添加 jQuery.mousewheel它以某种方式解决了问题。 (我只是在 .mousewheel() 上附加了一个空的事件处理程序。)我仍在寻找明确的答案。

Answer 1

为了允许元素(例如 <div> )使用触控板滚动但阻止浏览器返回上一页，您需要阻止浏览器的默认操作。

您可以通过监听元素上的鼠标滚轮事件来完成此操作。使用元素的滚动属性和事件的 deltaX/Y 属性，您可以在默认操作低于零或高于宽度/高度时阻止和停止默认操作。

当您阻止整个滚动操作时，您也可以使用增量信息手动滚动。这使您实际上可以达到零，而不是停在 10 个像素或其他地方。

// Add the event listener which gets triggered when using the trackpad 
element.addEventListener('mousewheel', function(event) {
  // We don't want to scroll below zero or above the width and height 
  var maxX = this.scrollWidth - this.offsetWidth;
  var maxY = this.scrollHeight - this.offsetHeight;

  // If this event looks like it will scroll beyond the bounds of the element, prevent it and set the scroll to the boundary manually 
  if (this.scrollLeft + event.deltaX < 0 || 
     this.scrollLeft + event.deltaX > maxX || 
     this.scrollTop + event.deltaY < 0 || 
     this.scrollTop + event.deltaY > maxY) {

    event.preventDefault();

    // Manually set the scroll to the boundary
    this.scrollLeft = Math.max(0, Math.min(maxX, this.scrollLeft + event.deltaX));
    this.scrollTop = Math.max(0, Math.min(maxY, this.scrollTop + event.deltaY));
  }
}, false);

这适用于 Mac 上的 Chrome、Safari 和 Firefox。我没有在 IE 上测试过。

此解决方案只会影响有问题的元素，并会让页面的其余部分正常运行。因此，您可以按预期使用浏览器并返回页面，但在元素内部时，您不会意外返回到您不希望返回的页面。