Any element that has vertical scroll is unscrollable with mousewheel

[Nodaysofff]

To reproduce:

1. Create page with lenis and make one of the elements to have overflow: auto or overflow: scroll and to be scrollable vertically
2. Try to hover mouse over it and use mousewheel to scroll
   Fact:
   element scroll is ignored due to html or body wheel listener and instead of element scroll the whole page scrolls
   Expected behavior:
   Element should scroll to its end and only then page scroll should start (just like with overscroll-behavior: auto)

Supposed fix:
Use a recursive function that traverses up the DOM tree to check overflow, something like this:

function hasScrollingAncestor(element) {
    if (!element.parentElement || element.parentElement.tagName.toLowerCase() === 'body') {
        return false;
    }
    const computedStyle = window.getComputedStyle(element.parentElement);
    if (computedStyle.overflow === 'scroll' || computedStyle.overflow === 'auto') {
        return true;
    } else {
        return hasScrollingAncestor(element.parentElement);
    }
}

[Clément Roche]

Can you share a codepen ?

[Nodaysofff]

Can you share a codepen ?

Sure: https://codepen.io/Nodaysofff/pen/XWQeJvg

You can comment whole js part to see the difference in scroll behaviour over the element with overflow

[Clément Roche]

you need data-lenis-prevent