fullpage.js:当鼠标指针在容器内滚动时禁用页面滚动

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')。此选项不应应用于任何区段/幻灯片元素本身。