fullpage.js:在容器内使用鼠标指针滚动时禁用页面滚动 [英] fullpage.js: disable page scroll when scrolled with the mouse pointer inside a container

问题描述

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

What's happening: Scrolling works no matter which position i have the mouse while i scroll.

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

What i want to achieve: When the user scrolls with the mouse pointer positioned inside a particular container, I would like to disable the plugin from changing pages. When the user scrolls with the mouse pointer outside that same container, the normal functionality of the plugin should be restored; i.e. the pages should be scrollable again.

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

What have i tried: I listened for the scroll event on the document and found out whether the mouse is inside the container while executing the scroll and store the possibilities as a boolean.

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

然后onLeave我尝试通过返回false

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

我使用setTimeout捕获preventScroll的期望值，尽管我猜该插件在该10 ms中执行了滚动，这就是为什么return false似乎没有效果的原因.我似乎无法弄清楚如何继续实现所需的功能.

I an using setTimeout to capture the desired value of preventScroll although I guess the plugin executes a scroll within that 10 ms and that's why return false doesn't seem to have an effect. I can't seem to figure out how else to proceed to achieve the desired functionality.

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

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

In this implementation, the container i want to disable scroll is in the second page/section. Please be aware of the values spit out in the console.

推荐答案

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

Use the fullpage.js option normalScrollElements. Check the fullpage.js docs for more info:

normalScrollElements:(默认为null)如果要在滚动某些元素时避免自动滚动，则需要使用此选项. (适用于地图，滚动div等.)它需要一个带有jQuery选择器的字符串用于这些元素. (例如:normalScrollElements:'#element1，.element2').此选项不应应用于任何剖面/幻灯片元素本身.

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:在容器内使用鼠标指针滚动时禁用页面滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！