Why to use?

• 01. Speed Control
• 02. Scroll direction
• 03. Lerp effect
• 04. Fixed Elements

CDN Link

locomotive-scroll CDN by jsDelivr - A free, fast, and reliable Open Source CDN

<aside> 💡 Copy the link of this file **locomotive-scroll.js → JS**

</aside>

<aside> 💡 Copy the link of this file **locomotive-scroll.css → CSS**

</aside>

GitHub - locomotivemtl/locomotive-scroll: 🛤 Detection of elements in viewport & smooth scrolling with parallax.

1. Basic Setup:

   // Initialize Locomotive Scroll
   const scroll = new LocomotiveScroll({
       el: document.querySelector('[data-scroll-container]'),
       smooth: true
   });
   

2. Customized Scroll Behavior:

   const scroll = new LocomotiveScroll({
       el: document.querySelector('[data-scroll-container]'),
       smooth: true,
       getDirection: true, // Detect scroll direction
       scrollFromAnywhere: true, // Enable scrolling from any position
       touchMultiplier: 2, // Increase touch scroll sensitivity
       tablet: {
           smooth: false // Disable smooth scrolling on tablet devices
       }
   });
   

3. Parallax Effect:

   // HTML structure: <div data-scroll data-scroll-speed="2">Your Content</div>
   
   const scroll = new LocomotiveScroll({
       el: document.querySelector('[data-scroll-container]'),
       smooth: true
   });
   

4. Scroll Events:

   const scroll = new LocomotiveScroll({
       el: document.querySelector('[data-scroll-container]'),
       smooth: true
   });
   
   scroll.on('scroll', (instance) => {
       console.log(instance.scroll.y); // Current scroll position
   });
   
   scroll.on('call', (value, way, obj) => {
       console.log(value, way, obj);
       // Custom actions based on specific scroll positions
   });
   

5. Scroll to a Specific Position:

   document.querySelector('#scroll-button').addEventListener('click', () => {
       scroll.scrollTo('#section-id');
   });