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

Question

发生了什么:无论我在滚动时将鼠标放在哪个位置，滚动都会起作用。

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

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

$(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 毫秒 内执行滚动，这就是原因return false 似乎没有效果。我似乎不知道如何继续实现所需的功能。

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

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

Answer 1

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

normalScrollElements: (default null) If you want to avoid the auto scroll when scrolling over some elements, this is the option you need to use. (useful for maps, scrolling divs etc.) It requires a string with the jQuery selectors for those elements. (For example: normalScrollElements: '#element1, .element2'). This option should not be applied to any section/slide element itself.