We've built similar things to Lenis before, and the way we did it was to detect which element was trying to be scrolled, the same way your browser would do it. So rather than having settings like wrapper
and content
we would do something like the below code on mouse wheel event.
The big advantage to this approach was we could enable it once, and not have to worry about init/destroy on modals/overlays etc... My guess is 99% of people are using Lenis to replace scrolling on the entire site, not just one scrolling element.
Anyway, I thought this might help and inspire a new wrapper
setting of auto
perhaps.
/**
* Figures out if an element has scrollbars
* https://stackoverflow.com/a/42681820/503546
* @param {HTMLElement} element
* @returns {object}
*/
function isScrollable(el) {
const style = getComputedStyle(el);
const hidden = style.overflow === "hidden";
const xHidden = style.overflowX === "hidden";
const yHidden = style.overflowY === "hidden";
// If overflow:hidden, then no scorll bars ever
if (hidden) {
return {
x: false,
y: false
};
}
// Calculate if element is overflowing
var y1 = el.scrollTop;
el.scrollTop += 1;
var y2 = el.scrollTop;
el.scrollTop -= 1;
var y3 = el.scrollTop;
el.scrollTop = y1;
var x1 = el.scrollLeft;
el.scrollLeft += 1;
var x2 = el.scrollLeft;
el.scrollLeft -= 1;
var x3 = el.scrollLeft;
el.scrollLeft = x1;
let x = x1 !== x2 || x2 !== x3;
let y = y1 !== y2 || y2 !== y3;
// Force no scrollbars if set as hidden in CSS
if (xHidden) {
x = false;
}
if (yHidden) {
y = false;
}
return {
x,
y
};
}
/**
* Finds the scrollable ancestors of an element in the correct direction
* @param {HTMLElement} element
* @returns {HTMLElement}
*/
function getScrollParent(direction, element) {
// Check upwards to find out if that is a scrollable
// element in the correct direction
for(var parent = element; parent; parent = parent.parentElement) {
if(getScrollable(direction, parent)) return parent;
}
}
Pay now to fund the work behind this issue.
Get updates on progress being made.
Maintainer is rewarded once the issue is completed.
You're funding impactful open source efforts
You want to contribute to this effort
You want to get funding like this too