css 当点击带有id的链接时，平滑滚动不适用于Lenis

6tr1vspr 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(148)

你知道为什么scroll-behavior：smooth不能和Lenis的smooth -scrolling库一起使用吗？当我注解下面的Lenis代码时，它工作得很好。当我添加Lenis代码时，当我点击带有id的标签时，它不能平滑地滚动。

const lenis = new Lenis({
  duration: 2.5
})

function raf(time) {
  lenis.raf(time)
  requestAnimationFrame(raf)
}
requestAnimationFrame(raf)

lenis.on('scroll', ScrollTrigger.update)

gsap.ticker.add((time) => {
  lenis.raf(time * 1000)
})

html {
  scroll-behavior: smooth;
}

<h2><a class="c-btn" href="#pages-main">scroll down</a></h2>
 
  <section id="pages-main"></section>

你知道为什么scroll-behavior：smooth不能和Lenis的smooth -scrolling库一起使用吗？当我注解下面的Lenis代码时，它工作得很好。当我添加Lenis代码时，当我点击带有id的标签时，它不能平滑地滚动。

const lenis = new Lenis({
  duration: 2.5
})

function raf(time) {
  lenis.raf(time)
  requestAnimationFrame(raf)
}
requestAnimationFrame(raf)

lenis.on('scroll', ScrollTrigger.update)

gsap.ticker.add((time) => {
  lenis.raf(time * 1000)
})

x

html {
  scroll-behavior: smooth;
}

<h2><a class="c-btn" href="#pages-main">scroll down</a></h2>
 
  <section id="pages-main"></section>

的一个字符串

css

来源：https://stackoverflow.com/questions/77387611/smooth-scroll-doesnt-work-with-lenis-when-link-with-id-clicked

1条答案

按热度按时间

uklbhaso1#

import { LenisInstance, ScrollToParams, useLenis } from "@studio-freight/react-lenis";

// Using the useLenis hook to get a LenisInstance
  const lenisInstance: LenisInstance = useLenis();

  // Function for smooth scrolling
    const handleClick = (targetElement: string | number | HTMLElement)=>{

    if (targetElement) {
      const scrollToOptions: ScrollToParams = {
        // Customize scroll options if needed
        offset: 0,
        lerp: 0.1,
        duration: 1.5,
        easing: (rawValue: number) => rawValue, // Example easing function
        immediate: false,
        lock: false,
        force: false,
      };

      lenisInstance.scrollTo(targetElement, scrollToOptions);
    }
  }

字符串
我已经使用了react-lenis，但它可能也可以与普通的lenis包一起工作。

赞(0）回复(0）举报 2024-01-09

我来回答

css 当点击带有id的链接时，平滑滚动不适用于Lenis

1条答案

相关问题

热门标签

最新问答