The smooth scrolling feature fails to function properly in Lenis when clicking on links with specified IDs

Question

The smooth scrolling feature fails to function properly in Lenis when clicking on links with specified IDs

Is there a reason why the scroll-behavior: smooth property doesn't function properly when Lenis library for smooth scrolling is included? It seems to work fine when the Lenis code is commented out, but once it's added back in, the scrolling isn't as smooth when clicking on the tag with the specified 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>

Is there a reason why the scroll-behavior: smooth property doesn't function properly when Lenis library for smooth scrolling is included? It seems to work fine when the Lenis code is commented out, but once it's added back in, the scrolling isn't as smooth when clicking on the tag with the specified 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>

javascript html css smooth-scrolling

Answer 1

Answer №1

By implementing the CSS property scroll-behavior: smooth on the html element, scrolling behavior for links with hash tags (#) can be improved. However, this may cause issues with normal scrolling functionality as it seems that lenis scroll controls the scroll behavior on the html element and does not maintain smooth scrolling for other scenarios.

To address this issue, a solution was devised by incorporating the following fix alongside the initialization code for lenis -

// Fix for internal id links
document.querySelectorAll('a[href^="#"]').forEach((el) => {
  el.addEventListener('click', (e) => {
    e.preventDefault()
    const id = el.getAttribute('href')?.slice(1)
    if (!id) return
    const target = document.getElementById(id)
    if (target) {
      target.scrollIntoView({ behavior: 'smooth' })
    }
  })
})

However, one drawback of this approach is that it does not update the URL with the corresponding #id. Attempts to manually adjust the URL using

document.location.hash = "#id"

will result in reverting back to instant scrolling instead of smooth scrolling.

Answer 2

By implementing the CSS property scroll-behavior: smooth on the html element, scrolling behavior for links with hash tags (#) can be improved. However, this may cause issues with normal scrolling functionality as it seems that lenis scroll controls the scroll behavior on the html element and does not maintain smooth scrolling for other scenarios.

To address this issue, a solution was devised by incorporating the following fix alongside the initialization code for lenis -

// Fix for internal id links
document.querySelectorAll('a[href^="#"]').forEach((el) => {
  el.addEventListener('click', (e) => {
    e.preventDefault()
    const id = el.getAttribute('href')?.slice(1)
    if (!id) return
    const target = document.getElementById(id)
    if (target) {
      target.scrollIntoView({ behavior: 'smooth' })
    }
  })
})

However, one drawback of this approach is that it does not update the URL with the corresponding #id. Attempts to manually adjust the URL using

document.location.hash = "#id"

will result in reverting back to instant scrolling instead of smooth scrolling.

Answer 3

Answer №2

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

// Utilizing the useLenis hook to retrieve a LenisInstance
  const myLenis: LenisInstance = useLenis();

  // Defining a function for smooth scrolling
    const handleScroll = (targetElem: string | number | HTMLElement)=>{

    if (targetElem) {
      const scrollParams: ScrollToParams = {
        offset: 0,
        lerp: 0.1,
        duration: 1.5,
        easing: (rawVal: number) => rawVal,
        immediate: false,
        lock: false,
        force: false,
      };

      myLenis.scrollTo(targetElem, scrollParams);
    }
  }

This code utilizes react-lenis, but it could also be compatible with the standard lenis package.

Answer 4

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

// Utilizing the useLenis hook to retrieve a LenisInstance
  const myLenis: LenisInstance = useLenis();

  // Defining a function for smooth scrolling
    const handleScroll = (targetElem: string | number | HTMLElement)=>{

    if (targetElem) {
      const scrollParams: ScrollToParams = {
        offset: 0,
        lerp: 0.1,
        duration: 1.5,
        easing: (rawVal: number) => rawVal,
        immediate: false,
        lock: false,
        force: false,
      };

      myLenis.scrollTo(targetElem, scrollParams);
    }
  }

This code utilizes react-lenis, but it could also be compatible with the standard lenis package.

Answer 5

Answer №3

If you're looking for a solution, check out the Lenis documentation. You have two options:

<a href="#anchor" onclick="lenis.scrollTo('#anchor')">scroll to anchor</a>

Alternatively, you can use a function called scrollTo(target, options)

target: the destination number: pixels to scroll string: CSS selector or keyword (top, left, start, bottom, right, end) HTMLElement: DOM element

Available options are: offset(number): same as scroll-padding-top lerp(number): animation smoothness duration(number): animation duration (in seconds) easing(function): animation style immediate(boolean): skip animation effects lock(boolean): prevent scrolling until reaching target force(boolean): reach target regardless of status onComplete(function): triggered upon reaching target

Answer 6

If you're looking for a solution, check out the Lenis documentation. You have two options:

<a href="#anchor" onclick="lenis.scrollTo('#anchor')">scroll to anchor</a>

Alternatively, you can use a function called scrollTo(target, options)

target: the destination number: pixels to scroll string: CSS selector or keyword (top, left, start, bottom, right, end) HTMLElement: DOM element

Available options are: offset(number): same as scroll-padding-top lerp(number): animation smoothness duration(number): animation duration (in seconds) easing(function): animation style immediate(boolean): skip animation effects lock(boolean): prevent scrolling until reaching target force(boolean): reach target regardless of status onComplete(function): triggered upon reaching target

Answer 7

Answer №4

After some troubleshooting, I found that the best fix was to disable the lenis-smooth rule in the CSS file.

/* .lenis.lenis-smooth {
    scroll-behavior: auto !important;
  } */

I'm positive this solution will work for you as well!

Answer 8

After some troubleshooting, I found that the best fix was to disable the lenis-smooth rule in the CSS file.

/* .lenis.lenis-smooth {
    scroll-behavior: auto !important;
  } */

I'm positive this solution will work for you as well!

The smooth scrolling feature fails to function properly in Lenis when clicking on links with specified IDs

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Guide to adding a theme switcher feature to your current React website

Resizing a column in the Bootstrap CSS grid causes adjacent columns to move

Accessing the react-bootstrap tab using the history feature in React

What is the reason behind not requiring to invoke the next function in a Sails.js controller method, even when it includes an asynchronous database query?

Ways to delay the inner function's output?

Pressing the tab key while using Angular will halt any additional processes from running

Having trouble with the tooltip feature in Bootstrap?

Modify the HTML select tag to toggle from a selected checkbox

The MUI component with hideBackDrop={true} is preventing me from clicking outside of the Drawer component to close it

Encountering a "file or directory not found" error during the installation of ply using

Leveraging createMuiTheme to customize default styles for divs, paragraphs, and the body element

Unexpected behavior from vuelidate triggered on blur

Reactively responsive table view

Creating a fixed navigation bar that stays at the top of the page when scrolling

Adding CSS properties to an image within the ImageResourceCell of a CellTable

Styling Javascript Objects

jQuery function failing to produce the intended results

Error received - CORS request denied on Firefox browser (Ubuntu)

Adjust the size of both the parent div and child textarea dynamically to ensure they are always equal without setting specific height or width values

AngularJS is not responding to a 400 bad request