有条件地取消 IE11 上的滑动滚动

Question

我有一个很大的 DIV (#screenArena)，我在其中渲染多个屏幕。在图像中，假设每个小方块都是屏幕的大小。白色方块有内容，黑色方块为空。

screenArena的可见部分是一个正方形的大小。然后我滚动 ScreenArena 以在用户滑动时顺序显示屏幕。

为了利用硬件滚动，顺便说一句，它真的很棒，我使用：

#screenArena {
    -ms-scroll-snap-type: mandatory;
    -ms-scroll-snap-points-x: snapInterval(0%, 100%);
    -ms-scroll-snap-points-y: snapInterval(0%, 100%);

    scroll-snap-type: mandatory;
    scroll-snap-points-x: snapInterval(0%, 100%);
    scroll-snap-points-y: snapInterval(0%, 100%);

    overflow:auto;
}

这按预期工作，因此 screenArena 有许多 "squares" 不同的屏幕，用户在每个方块中滑动和滚动。

问题：并非所有位置都有效，有些位置是空的，所以如果我确定它是空位置，我想在运行时取消滚动事件。

与JQuery:

   $("#screenArena").scroll(function(scrollEvent) {

       if (CHECK_SQUARE_IS_EMPTY()) {
          window.console.log ("Scrolling prevented");
          var origEvent=scrollEvent.originalEvent;
          origEvent.preventDefault();
          origEvent.stopPropagation();
          return false;
       } else {
          window.console.log ("Scrolling permitted");
          return true;
       }
   });

但是，这不会阻止滚动。不是 stopPropagation，不是 preventDefault，也不返回 false。

有办法吗？

Answer 1

尝试了很多东西并找到了一个非常简单且工作正常的解决方案。

如果在滚动事件期间我决定方块是空的，我只是将 scrollTop / scrollLeft 重置为事件内的原始（初始）位置：

$("#screenArena").scroll(function(scrollEvent) {

       if (CHECK_SQUARE_IS_EMPTY()) {
          window.console.log ("Scrolling prevented");
          if (SCROLLING_UP || SCROLLING_DOWN) this.scrollTop=ORIGINAL_SCROLL_TOP_POSITION;
          if (SCROLLING_LEFT || SCROLLING_RIGHT) this.scrollLeft=ORIGINAL_SCROLL_LEFT_POSITION;
       } else {
          window.console.log ("Scrolling permitted");
       }
   });

有条件地取消 IE11 上的滑动滚动

Conditionally cancel swipe-scrolling on IE11

javascript

html

scroll

touch

internet-explorer-11