mickaelchanrion
commented
3 weeks ago Hello @iamlinkus
This is one of the trade-offs of using Lenis. This is mentioned in the documentation here: nested scroll elements should have the data-attribute data-lenis-prevent to indicate Lenis it should stop interfering. Note that you can add/remove this attribute programatically after Lenis was instanciated without any problem.
That being said, you could also end up in some cases where you don't have the control over a scrollable element. Like an element created some time in the life of the page by a third party script and no events or hooks are available for you to add this attribute. This is exactly what happened to me in the issue #334.
A new option prevent was added in v1.1.1 (see).
example:
Let's assume the vercel toolbar has the class .vercel-toolbar. You can do:
new Lenis({
prevent: (element) => {
return element.nodeName === "VERCEL-LIVE-FEEDBACK"
}
})The scroll will be back to normal inside this element.
clementroche
iamlinkus
Describe the bug In projects where Lenis is used for the whole document, using the Vercel toolbar is not possible, since Lenis blocks the scrollable areas of the toolbar (comments list, etc.).
To Reproduce Try using Vercel toolbar in any Lenis project, where lenis is initialized on the document, rather than a predefined wrapper. Open comments, add enough comments that you'd need to scroll down in the toolbar to see them all - scrolling doesn't work.
Workaround with flaws If you use a wrapper, instead of initializing on the whole document, the toolbar works. But the downside to using wrappers is that when developing your project using HMR, it force-resets the scroll, since the wrapper must be fixed with the height of the browser.
I tried implementing my own hook that observes the dom and if it finds vercel toolbar it forces lenis to ignore it and pass through the events to the toolbar areas that are scrollable, but since the toolbar is injected as shadow dom - you're not actually able to select the elements within it.
If not fixed, I think there should be a disclaimer in the readme, that using Lenis when initializing on the document (and not a wrapper), renders the super useful Vercel preview toolbar useless. And with the upcoming new features for the toolbar, which will make it almost mandatory to use on client projects, I think this might be a big problem when deciding on whether to use Lenis for a project or not.