-2

I'm trying to figure out how to lessen the width of the mousewheel detected scrollable area in Fullpage.js so that I can add my separately scrolling sidebar.

glenn nall
  • 41
  • 9

1 Answers1

1

You can use the fullpage.js option normalScrollElemetns:

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    scrollOverflow:true,
    normalScrollElements: '#myElement'
});

CSS

#myElement{
    width: 300px;
    height: 400px;
    overflow:scroll;
    background: green;
}

Reproduction online

From the docs

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')

Alvaro
  • 40,778
  • 30
  • 164
  • 336
  • outstanding. | in the reproduction, in order to prevent scrolling the Fullpage element when scrolling over the normalScrollElements, i had to ensure that normalScrollElements height is 100% and float the two elements out of each others' way. the main element still wants to detect mousewheel when scrolling over normalScrollElements... i noticed this feature earlier. You've clarified its operation for me, tho. ||| Out of curiosity, and still related - how exactly is mousewheel detected in this script? is it using its own function, or a browser function, or what? do you know...? ||| thanks again. – glenn nall Sep 02 '16 at 15:05
  • 1
    You can check it yourself [here in the code.](https://github.com/alvarotrigo/fullPage.js/blob/master/jquery.fullPage.js#L633) – Alvaro Sep 02 '16 at 17:20