Add function to prevent scroll

[mickaelchanrion]

Hi there 👋

data-lenis-prevent is very useful to allow nested scroll but in some peculiar cases, we don't have the control over an element that is expected to be scrollable so no way to add this attribute.

Here is an example: a third party cookie modal for fine grained controls.

In this situation this element is generated by their script and they do not provide events on modal triggering so I don't really see how I can add the attribute. Here is a solution I could think of:

new Lenis({
  // Prevent scroll on any `.foo` element
  preventScroll: (node) => {
    return node.classList.contains('foo')
  }
})

I can propose a PR for that :)

[clementroche]

hi @mickaelchanrion, good idea ! Do you know if these modals always use the same classes ?

[mickaelchanrion]

Hi Clement, I guess yes, in 99% of cases. If we want to cover every potential situation, we could define preventScroll this way:

type LenisOptions = {
  // ...
  preventScroll?: string[] | (node: Element) => boolean
}

[clementroche]

hey @mickaelchanrion what service provides this cookie modal and what class is used ? I wanna provide an example in the documentation

[clementroche]

@mickaelchanrion should be available in v1.1.0

[mickaelchanrion]

@clementroche Great news!!

Regarding your question, you can open this link: https://www.cookieyes.com/ You'll see a cookie banner. Click on customize and a modal will appear. This modal .cky-modal contains scrollable elements such as .cky-iab-detail-sub-wrapper.

After checking the v1.1.0, a correct example could be:

new Lenis({
  prevent: (node) => node.classList.contains('cky-modal')
})

[clementroche]

Exact @mickaelchanrion, does it suits your needs ? If so i'm closing this issue.