Question

发生了什么：滚动无论我在哪个位置滚动，滚动都会正常工作。

我想要实现的目标：当用户滚动鼠标指针位于特定容器内时，我想禁用插件来更改页面。当用户使用鼠标指针在同一容器外滚动时，应该恢复插件的正常功能;即页面应该可以再次滚动。

我尝试了什么：我在文档上侦听了滚动事件，并在执行滚动时发现鼠标是否在容器内，并将可能性存储为布尔值。

$(document).bind("mousewheel", function(event) {
   // preventScroll = true;
   console.log(event);
   if($(event.target).closest(".no-scroll").length) {             
     preventScroll = true;
    }
    else {
      preventScroll = false;
    }
});

然后onLeave我试图找出preventScroll的值并尝试通过返回false

来停止事件传播（因为想要停止实际事件）

  setTimeout(function() {
      console.log(preventScroll);
      if(preventScroll) {
        console.log("no-scroll")
        return false;
      }
  }, 10);

我使用setTimeout来捕获preventScroll的所需值，但我猜这个插件会在10 ms内执行滚动，这就是为什么return false没有＆{似乎有效果。我似乎无法弄清楚如何继续实现所需的功能。

Codepen： https://codepen.io/binarytrance/pen/YxBqPj

在此实现中，我想要禁用滚动的容器位于第二页/部分中。请注意控制台中吐出的值。

Answer 1

使用fullpage.js选项normalScrollElements。查看fullpage.js文档以获取更多信息：

normalScrollElements：（默认为null）如果要在滚动某些元素时避免自动滚动，则需要使用此选项。（对于地图，滚动div等有用）它需要一个带有jQuery选择器的字符串用于这些元素。（例如：normalScrollElements：'＃element1，.element2'）。此选项不应该应用于任何部分/幻灯片元素本身。

fullpage.js：在容器

1 个答案: