Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

change scroll wrapper #570

Open
lorangdevelopment opened this issue Dec 29, 2024 · 2 comments
Open

change scroll wrapper #570

lorangdevelopment opened this issue Dec 29, 2024 · 2 comments

Comments

@lorangdevelopment
Copy link

I currently can't seem to change the scroll wrapper in Locomotive Scroll v5. I need to use a custom div (with id "global-scroll") as the website's scroll wrapper instead of the window. This limitation prevents me from implementing a specific layout structure that requires a custom scroll container.

Like this:

const scroll = new LocomotiveScroll({ wrapper: document.getElementById('global-scroll'), // other options... });

@yashsarode45
Copy link

I had the same issue, when I passed a custom wrapper and content in the lenisOptions while instantiating it was getting overridden to wrapper: window and content: document.documentElement.
Looked into the code, and there's an issue in the _init() method which creates an instance of Lenis.

    /**
     * Lifecyle - Initialize instance.
     *
     * @private
     */
    private _init(): void {
        // Create Lenis instance
        this.lenisInstance = new Lenis({
            ...this.lenisOptions,
            wrapper: window,
            content: document.documentElement,
            infinite: false
        });
        ...
        }

Here the way wrapper and content are written, it is always overriding the once passed in lenisOptions while instantiating.

It should have been done in the following manner so that it honors the wrapper and content passed while instantiating and uses window and document.documentElement as default values.

this.lenisInstance = new Lenis({
    ...this.lenisOptions,
    wrapper: this.lenisOptions.wrapper || window,
    content: this.lenisOptions.content || document.documentElement,
    infinite: false
  });

@matto49
Copy link

matto49 commented Feb 9, 2025

meet the same problem, will this be repaired?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants