Info
Overview
This script adds smooth scrolling with Lenis, replacing the browser’s default scroll with a softer, more fluid motion for a cleaner, more refined feel across the site.
Setup
Copy & paste the scripts before the </body> tag of your project. If you added them before for another setup, skip this step.
<!-- Lenis CSS -->
<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.16/dist/lenis.css">
<!-- Lenis Script -->
<script src="https://unpkg.com/lenis@1.3.16/dist/lenis.min.js"></script>Right-click in Elementor, choose “Paste from another site,” and while the popup is open, press cmd/ctrl + v to insert the layout.
Place the code in an HTML widget or add it through Elementor → Custom Code (before the closing </body> tag) either globally or only on selected pages.
Paste the code through the page or site settings, or add it via Elementor → Custom Code (before </body>) for broader use.
Paste the script through Elementor → Custom Code (set to load after </body>) for site-wide or page-specific loading.
document.addEventListener("DOMContentLoaded", () => {
if (document.body.classList.contains("elementor-editor-active")) return;
const lenis = new Lenis({
lerp: 0.1, // Smoothness (0.05 = very smooth, 0.5 = snappy)
wheelMultiplier: 0.7, // Scroll speed (0.5 = slower, 1 = faster)
gestureOrientation: "vertical", // Scroll direction ("vertical", "horizontal", "both")
normalizeWheel: false, // Use raw wheel input (no normalizing)
smoothTouch: false, // Smooth scroll on touch devices
infinite: false // Infinite looping
});
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
window.ouLenis = lenis;
});Place the PHP snippet inside your theme’s functions.php or using any code snippet to enable logic.
Implementation
Once loaded, the script enables a smoother, more natural scroll on desktop.
It automatically disables itself in the Elementor editor and on touch devices to keep editing stable and scrolling native.
Fix Nested Scrolling Issues
Use data-lenis-prevent on elements that should use native browser scrolling instead of Lenis.
This is especially important for containers that have their own scroll area, such as modals or any element using overflow: auto or overflow: scroll.
Nested scrolling does not work reliably with Lenis unless this attribute is applied, so any inner scrollable container must include it or users may not be able to scroll it at all.
When set, Lenis completely ignores the element and lets it behave normally.
Lenis Settings
These settings define how Lenis behaves at its core. They control the smoothness, speed, direction, and overall feel of scrolling
Scroll Smoothness
The lerp setting controls how soft or snappy the scrolling feels. Lower values make scroll movement very smooth and slow, while higher values create tighter, more responsive motion.
Scroll Speed
The wheelMultiplier setting controls how quickly the page scrolls when using a mouse wheel or trackpad. Lower values make scrolling slower and more controlled. Higher values increase speed and responsiveness.
Scroll Direction
The gestureOrientation setting determines which direction scrolling is allowed. You can restrict movement to vertical, horizontal, or allow both directions.
Touch Behavior
The smoothTouch setting controls whether smooth scrolling should apply on touch devices. In this setup it is set to false, keeping mobile scrolling natural and responsive.
Infinite Scrolling
The infinite setting controls whether the scroll should loop endlessly.