代码之家 › 专栏 › 技术社区 › rupps

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

internet-explorer-11 touch scroll html javascript

rupps · 技术社区 · 10 年前

我有一个大DIV( #screenArena )在那里我呈现了几个屏幕。在图像中,假设每个小正方形都是屏幕的大小。白色方块有内容,而黑色方块是空的。

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

enter image description here

为了利用硬件滚动,顺便说一句,我使用了:

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

这和预期的一样 screen竞技场 有许多不同屏幕的“方块”,用户在每个方块中滑动和滚动。

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

使用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 .

有办法做到这一点吗?

1 回复 | 直到 10 年前

rupps 10 年前

尝试了很多事情,找到了一个非常简单、工作正常的解决方案。

如果在滚动事件期间我确定正方形为空,我只需重置 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");
       }
   });