Conditionally cancel swipe-scrolling on IE11

Question

I have a big DIV ( #screenArena ) where I render several screens. In the image, assume each little square is the size of the screen. White squares have content, while black squares are empty.

The visible part of screenArena is the size of one square. I then scroll ScreenArena to sequentially show the screens as the user swipes.

To take advantage of hardware scrolling, that by the way really rocks, I use:

#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;
}

This works as expected, so as the screenArena has many "squares" with different screens, the user swipes and the scroll snaps in each square.

The problem: Not all positions are valid, some are empty, so I'd like to cancel the scroll event at runtime if I decide it's an empty position.

With 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;
       }
   });

However, this doesn't prevent the scrolling. Not stopPropagation , not preventDefault , neither returning false .

Is there a way to do this?

Answer 1

Tried a lot of things and found a very simple solution that works decently.

If during the scroll event I decide the square is empty, I just reset the scrollTop / scrollLeft to the original (initial) position inside the event:

$("#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");
       }
   });