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

user_13779525 0
Viewed 87

I'm using fullpage.js for sliding full page content but when the navbar is open I need to stop the slider to do scrolling because when I do scroll on the Navbar, the background slide is also getting scrolled.

For this I found a function in fullpage.js API setAllowScrolling after setting it false while navbar is open is also not allowing me to scroll inside the navbar.

Any solution regarding this issue because I want to make navbar overflow scroll & stop background scroll till the navbar is open but after the updated changes Navbar also get freeze with by setAllowScrolling=false

fullpage.js scroll javascript
1 Answers

You'll have to also use the option normalScrollElements and pass to it the selector for you scrollable content.

You can read more about this option on the the fullpage.js documentation.

See a full working demo here: 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');
}
user_10813960
Related