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

在此实现中，我要禁用滚动的容器在第二个 page/section 中。请注意控制台中吐出的值。

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.

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

fullpage.js: disable page scroll when scrolled with the mouse pointer inside a container

javascript

jquery

fullpage.js