Tailwind Scrollable makes it easy to add vertically or horizontally scrollable sections with custom scrollbar styles, perfect for long lists, data tables, or extended content.
Examples
Basic Usage
To implement a custom scrollable content with a fixed height, simply utilize the kt-scrollable custom class. This class is designed to create a improved scrollable area within your HTML document.
Use data-kt-scrollable="true" to auto initialize the Tailwind KTScrollable component that dynamically calculates the height of the scrollable content by subtracting the the total heights of specific elements defined via data-kt-scrollable-dependencies="#header, #footer" the total spacings of specific elements defined via data-kt-scrollable-wrappers="#header, #footer" within the HTML document.
Customize the scrollbar thumb color to match your design requirements using the CSS variable for default and dark demos using [--tw-scrollbar-thumb-color:red] and [--tw-scrollbar-thumb-color-dark:yellow] classes.
Specifies the comma-separated IDs of elements whose heights are calculated and subtracted from the window offset height to determine scrollable height.
data-kt-scrollable-wrappers
string
-
Specifies the comma-separated IDs of elements whose spacings(margin, padding, border widths) are calculated and subtracted from the window offset height to determine scrollable height.
data-kt-scrollable-offset
string
"0px"
Specifies the offset CSS value in pixel to subtract from the calculated height.
kt-scrollable-x
Adds horizontal scrolling to the content.
kt-scrollable-y
Adds vertical scrolling to the content.
kt-scrollable-auto
Automatically adds scrolling based on content overflow.
kt-scrollable-x-auto
Automatically adds horizontal scrolling based on content overflow.
kt-scrollable-y-auto
Automatically adds vertical scrolling based on content overflow.
kt-scrollable-hover
Adds scrollbars on hover.
kt-scrollable-x-hover
Adds horizontal scrollbars on hover.
kt-scrollable-y-hover
Adds vertical scrollbars on hover.
getElement()
Retrieves the DOM element linked to a specific KTScrollable instance.
on(eventName, handler)
Allows attaching event listeners to the KTScrollable custom events using the eventName and eventId string parameters. These events enable programmatic interaction based on user actions or internal state changes of KTScrollable. The function returns string as a unique identifier for the registered listener, allowing you to remove it later if needed.
off(eventName, eventId)
Removes an event listener for the eventName and eventId parameters attached with the on method.
dispose()
Removes the KTScrollable instance from an element, including any associated data stored on the DOM element.
element
getOrCreateInstance(element)
Returns the existing KTScrollable object for the provided DOM element element , or creates a new instance if none exists, then returns the same.