data-aether-scroll-lock

This attribute prevents the background page (body) from scrolling when a window is opened. It is used to keep the user's focus on the open window and to prevent unwanted scroll chaining issues.

01 Usage

This is a "Boolean Attribute." When you add this attribute to the target element, body scrolling is stopped the moment the element opens.

index.html

<div 
    id="demo-modal"
    class="hidden fixed inset-0 z-50 flex items-center justify-center"
    data-aether-click-outside
    data-aether-scroll-lock
>
    ...
</div>

02 Technical Notes

CSS Class

When this feature is active, the system adds the class specified in the configuration (Default: overflow-hidden) to the body tag.

If you are using Tailwind CSS, this class is already available. If you are using Bootstrap or custom CSS, ensure that this class is defined in your CSS file or changed via the AetherUI config settings.