1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. Anuncie Aqui
    Anuncie aqui você Também: fdantas@4each.com.br

Why my Lenis scroll is not working with Angular Material bottomSheet?

Discussão em 'Angular' iniciado por sivir, Setembro 1, 2025.

  1. sivir

    sivir Guest

    I'm using Lenis library to manage scroll on my website, but I'm also using BottomSheet of Angular Material to enable my cookies component. The problem is that when I close the bottomSheet, the scroll with the mouse is not working until I reload the page (with the cookies consent on true). I managed to create a start/stop method on the service to "reload" the lenis scroll, but is not working, the only thing that works is window.reload() (but I don't wan't to reload the entire website). Any tips? Thanks!

    private lenis: Lenis;
    private rafId: number | null = null;

    constructor(private zone: NgZone, private cookies: CookieService) {
    this.lenis = new Lenis({
    duration: 1.2,
    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
    });
    }

    ngOnInit() {
    if (this.cookies.check('isConcent')) {
    this.start();
    }
    }

    scrollTo(target: HTMLElement | number | string) {
    this.lenis.scrollTo(target);
    }

    start() {
    if (this.rafId) return;
    this.zone.runOutsideAngular(() => {
    const loop = (time: number) => {
    this.lenis.raf(time);
    this.rafId = requestAnimationFrame(loop);
    };
    this.rafId = requestAnimationFrame(loop);
    });
    }

    stop() {
    if (this.rafId) {
    cancelAnimationFrame(this.rafId);
    this.rafId = null;
    }
    }

    destroy() {
    this.stop();
    }
    } ```

    Continue reading...

Compartilhe esta Página