Focus doesn't change to the scroll element

[23d1]

Describe the bug When setting a scrollable element other than default, it doesn't catch keyboard input (up/down pgup/pgdown home/end etc.) until you click in viewport. Feels like this could be an additional option for those cases one wants to run the whole site in a container.

Might be related to #117

[clementroche]

Can you provide a reproduction link ? Also does it work if you remove Lenis ?

[23d1]

@clementroche sure thing, running it live on my site at the moment; https://23d.one/ If I remove Lenis I also have to remove the specific CSS on the elements as the intent is for the smaller viewport menu to push down the content within the scrolling element, if that makes sense?

[23d1]

I think I may have solved it by adding tabindex="0" to the wrapper div (#content), and then targeting that with .focus() on load. Didn't realize the div needed to have a tabindex.

[23d1]

After some testing, this is essentially the solution (which might not be perfect for all cases, but works for this specific case), and so I fire this off initially, then on every AJAX page load.

let lenis = null;
function initLenis() {
    lenis = new Lenis({
        wrapper: document.querySelector('#content'),
        content: document.querySelector('#content-body')
    });
    function raf(time) {
        lenis.raf(time)
        requestAnimationFrame(raf)
    }
    requestAnimationFrame(raf)
    document.querySelector('#content').focus();
}

[23d1]

As a quick follow-up in case someone is looking to sort this out for a similar use case, I went back to all default lenis initialization and so forth, and used clip-path for masking out the scrolled content in the container div to achieve the same effect I was going for with moving the page content down/left (clipped) to reveal menu items.