有条件地取消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有很多＆＃34;正方形＆＃34;使用不同的屏幕，用户滑动和每个方块中的滚动按钮。

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

使用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");
       }
   });