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);
    }
}

[clementroche]

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

[clementroche]

you need data-lenis-prevent