为什么我在 fullpage.js 中的 setAllowScrolling=false 之后不在 Navbar 中使用 Scroll？

Question

我正在使用 fullpage.js 来滑动整页内容，但是当导航栏打开时我需要停止滑块来滚动，因为当我在导航栏上滚动时，背景幻灯片也会滚动.

为此，我在 fullpage.js API setAllowScrolling 中找到了一个函数，在将其设置为 false 后，当导航栏打开时，它也不允许我在导航栏。

有关此问题的任何解决方案，因为我想让导航栏溢出滚动并停止背景滚动直到导航栏打开，但在更新更改后，导航栏也会被 setAllowScrolling=false

冻结

Answer 1

您还必须使用选项 normalScrollElements 并将可滚动内容的选择器传递给它。

您可以在 the fullpage.js documentation 上阅读有关此选项的更多信息。

在此处查看完整的工作演示： https://codepen.io/alvarotrigo/pen/QWpBZyB

new fullpage('#fullpage', {
  licenseKey: 'YOUR KEY HERE',
  sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
  
  normalScrollElements: '.modal-window'
});

document.querySelector('button').addEventListener('click', openModal);
document.querySelector('.modal-close').addEventListener('click', closeModal);

function openModal(e){
  e.preventDefault();
  fullpage_api.setAllowScrolling(false);
  document.querySelector('.modal-window').classList.add('active');
}

function closeModal(e){
  e.preventDefault();
  fullpage_api.setAllowScrolling(true);
  document.querySelector('.modal-window').classList.remove('active');
}

为什么我在 fullpage.js 中的 setAllowScrolling=false 之后不在 Navbar 中使用 Scroll？

Why I'm not to use Scroll in Navbar after setAllowScrolling=false in fullpage.js?

javascript

scroll

fullpage.js