我正在开发一个使用水平滚动的用户界面div元素（使用overflow: scroll）。我无法向左滚动，因为它会启动动画以返回历史。同样，当有一个网站可供前进时，我无法向右滚动。
它在其他浏览器上运行良好，包括 OS X Lion 上的 Chrome，它还支持滑动以返回历史记录。 （在我开发过程中的某个时刻，滚动div也曾在 Safari 上工作过。我添加了事件处理程序和 html，这可能会破坏滚动，但我不知道是什么导致了它的改变。）
理想情况下，我想防止在滚动特定内容时在历史记录中后退或前进div（即使已经结束。）
更新：我尝试添加jQuery.mousewheel https://github.com/brandonaaron/jquery-mousewheel它以某种方式解决了问题。 （我刚刚附加了一个空的事件处理程序.mousewheel().）我仍在寻找明确的答案。
为了允许一个元素（例如a<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上测试过。
此解决方案只会影响有问题的元素，并使页面的其余部分正常运行。因此，您可以按预期使用浏览器并返回页面，但在元素内部时，您不会在无意时意外返回。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
