fullpage.js：在容器内使用鼠标指针滚动时禁用页面滚动答案

【问题标题】：fullpage.js: disable page scroll when scrolled with the mouse pointer inside a containerfullpage.js：在容器内使用鼠标指针滚动时禁用页面滚动
【发布时间】：2017-09-01 07:40:47
【问题描述】：

发生了什么：无论我在滚动时将鼠标放在哪个位置，滚动都有效。

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

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

$(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

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

【问题讨论】：

标签： javascript jquery fullpage.js

【解决方案1】：

使用 fullpage.js 选项 normalScrollElements。查看 fullpage.js 文档了解更多信息：

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

【讨论】：