Details
Overview
This script manages Lenis page scrolling using simple attributes. It lets buttons or elements on the page start, stop, or toggle scrolling when clicked. It can also automatically toggle scrolling when certain elements enter or leave the viewport.
Setup
Add External Scripts
Copy & paste the scripts before the </body> tag of your project. If you added them before for another setup, skip this step.
Add HTML
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.
Add Custom CSS
Paste the code through the page or site settings, or add it via Elementor → Custom Code (before </body>) for broader use.
Add Custom Javascript
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 = window.ouLenis;
if (!lenis) return;
const start = "[data-lenis-start]";
const stop = "[data-lenis-stop]";
const toggle = "[data-lenis-toggle]";
const visible = "[data-lenis-visible]";
const scrollbargap = "data-lenis-scrollbargap";
let locked = false;
const getscrollbarwidth = () =>
window.innerWidth - document.documentElement.clientWidth;
const applyscrollbarfix = () => {
const width = getscrollbarwidth();
if (width > 0) document.body.style.paddingRight = width + "px";
};
const removescrollbarfix = () => {
document.body.style.paddingRight = "";
};
const lock = (gap) => {
if (locked) return;
if (gap) applyscrollbarfix();
document.documentElement.style.overflow = "hidden";
lenis.stop();
locked = true;
};
const unlock = (gap) => {
if (!locked) return;
if (gap) removescrollbarfix();
document.documentElement.style.overflow = "";
lenis.start();
locked = false;
};
document.addEventListener("click", e => {
const s = e.target.closest(start);
if (s) {
const gap = s.getAttribute(scrollbargap) !== "false";
unlock(gap);
return;
}
const p = e.target.closest(stop);
if (p) {
const gap = p.getAttribute(scrollbargap) !== "false";
lock(gap);
return;
}
const t = e.target.closest(toggle);
if (t) {
const gap = t.getAttribute(scrollbargap) !== "false";
locked ? unlock(gap) : lock(gap);
}
});
const visibles = document.querySelectorAll(visible);
if (visibles.length) {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
const el = entry.target;
const gap = el.getAttribute(scrollbargap) !== "false";
if (getComputedStyle(el).display === "none") {
unlock(gap);
return;
}
if (entry.isIntersecting) {
lock(gap);
} else {
unlock(gap);
}
});
});
visibles.forEach(el => observer.observe(el));
const displayObserver = new MutationObserver(() => {
visibles.forEach(el => {
if (getComputedStyle(el).display === "none") {
unlock(el.getAttribute(scrollbargap) !== "false");
}
});
});
displayObserver.observe(document.body, {
attributes: true,
subtree: true,
attributeFilter: ["style", "class"]
});
}
});Add Custom PHP
Place the PHP snippet in your theme’s functions.php file or add it using a code snippets plugin to enable the logic.
Publish and preview live
Some solutions only work on the live site. Always publish and test after each change, as results may not appear in the editor.
Implementation
Use the following attributes to manage Lenis scrolling behavior on the page.
Stop Scrolling
Use the data-lenis-stop attribute on any element that should pause page scrolling. When this element is clicked, Lenis scrolling stops and page scrolling is locked.
Start Scrolling
Use the data-lenis-start attribute on any clickable element that should enable scrolling again. When this element is clicked, Lenis scrolling resumes and the page returns to its normal scrolling behavior.
Toggle Scrolling
Use the data-lenis-toggle attribute on any element if you want it to switch between stopped and active scrolling when clciked. Each click will toggle the scroll state between locked and unlocked.
Visibility-Based Scroll
Use the data-lenis-visible attribute on any element that should automatically affect page scrolling based on its visibility in the viewport.
Scrolling will be disabled when the element is visible on the page, meaning the element is present in the layout and not set to display: none. When the element leaves the viewport or becomes hidden, scrolling is enabled again.
For instance, this attribute should not be added to the button or trigger that is clicked. Instead, the data-lenis-visible attribute must be placed on the element whose visibility is being controlled by that trigger.
The clicked element simply performs the action that shows or hides another element. The data-lenis-visible attribute should be added to the element that appears or disappears on the page, because the script monitors that element’s visibility to determine when scrolling should be disabled or enabled again.
Scrollbar Gap
When page scrolling is locked, the browser scrollbar disappears.
This can cause the layout to stretch and shift slightly because the page suddenly gains extra width. By default, the script reserves space for the scrollbar width to keep the layout stable.
If needed, this behavior can be disabled by setting data-lenis-scrollbargap="false" on the element. When set to false, the script will not reserve space for the scrollbar width.
This attribute can be added to elements using data-lenis-start, data-lenis-stop, data-lenis-toggle, or data-lenis-visible to control how the scrollbar gap behavior is handled.