Overview
Usage
<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css"/>
<script src="assets/js/scripts.bundle.js"></script>
Initialization
- Scroll comes with its own CSS and JS files that creates the smooth logic and beautiful design for each of our custom scrollbars.
- To initialize it, simply add the
.scrollCSS class to the required HTML container. - Scroll instances can be created programmatically. See below for more info.
Basic
.scrollin a HTML container with a suitable fixed height for a basic scroll bar:Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo vel fringilla est ullamcorper eget nulla. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. Sed faucibus turpis in eu mi. Velit egestas dui id ornare arcu odio. Arcu non odio euismod lacinia at quis risus sed vulputate. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Vehicula ipsum a arcu cursus. Gravida neque convallis a cras semper. Amet massa vitae tortor condimentum. Lectus mauris ultrices eros in cursus turpis massa. Orci sagittis eu volutpat odio facilisis mauris sit amet. Hac habitasse platea dictumst quisque sagittis purus sit amet volutpat. Erat pellentesque adipiscing commodo elit at imperdiet dui. Vestibulum morbi blandit cursus risus at ultrices.
Quis ipsum suspendisse ultrices gravida dictum. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Vitae proin sagittis nisl rhoncus mattis rhoncus urna. Eget arcu dictum varius duis at consectetur lorem donec massa. Morbi tincidunt ornare massa eget. Ornare arcu dui vivamus arcu felis. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Aliquet nec ullamcorper sit amet. Dignissim enim sit amet venenatis urna cursus eget. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Non consectetur a erat nam at. Ut morbi tincidunt augue interdum velit. Ridiculus mus mauris vitae ultricies leo integer malesuada.
Ipsum dolor sit amet consectetur adipiscing. Blandit cursus risus at ultrices mi tempus imperdiet. Risus nullam eget felis eget. A lacus vestibulum sed arcu non. Tristique magna sit amet purus gravida quis blandit turpis cursus. Imperdiet nulla malesuada pellentesque elit. Nec dui nunc mattis enim ut tellus elementum sagittis. Ac placerat vestibulum lectus mauris. Facilisi etiam dignissim diam quis enim. Suspendisse faucibus interdum posuere lorem ipsum dolor. Mattis rhoncus urna neque viverra justo nec ultrices. Luctus accumsan tortor posuere ac ut consequat semper viverra nam. At varius vel pharetra vel turpis nunc eget. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Ut morbi tincidunt augue interdum velit euismod in.
Etiam tempor orci eu lobortis elementum nibh. Libero volutpat sed cras ornare arcu. Risus sed vulputate odio ut enim. Iaculis nunc sed augue lacus viverra vitae. Enim neque volutpat ac tincidunt vitae. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet dui. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet. Ullamcorper a lacus vestibulum sed arcu. In dictum non consectetur a erat. Varius quam quisque id diam vel quam elementum. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla. Sed viverra tellus in hac habitasse platea dictumst. Amet cursus sit amet dictum sit amet. Elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Non tellus orci ac auctor augue mauris.
Ut lectus arcu bibendum at varius vel. Arcu felis bibendum ut tristique et egestas quis. Sit amet commodo nulla facilisi nullam vehicula ipsum. Tellus cras adipiscing enim eu turpis egestas pretium. Imperdiet massa tincidunt nunc pulvinar sapien et. Integer eget aliquet nibh praesent tristique magna sit. Lacinia at quis risus sed vulputate odio ut. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Aenean pharetra magna ac placerat vestibulum. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Viverra nam libero justo laoreet sit amet cursus sit amet. Diam vel quam elementum pulvinar. Massa vitae tortor condimentum lacinia quis vel eros donec ac.
<div class="scroll h-400px px-5">
...
</div>
Hover
.hover-scrollin a HTML container with a suitable fixed height to display the scrollbar on hover:Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo vel fringilla est ullamcorper eget nulla. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. Sed faucibus turpis in eu mi. Velit egestas dui id ornare arcu odio. Arcu non odio euismod lacinia at quis risus sed vulputate. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Vehicula ipsum a arcu cursus. Gravida neque convallis a cras semper. Amet massa vitae tortor condimentum. Lectus mauris ultrices eros in cursus turpis massa. Orci sagittis eu volutpat odio facilisis mauris sit amet. Hac habitasse platea dictumst quisque sagittis purus sit amet volutpat. Erat pellentesque adipiscing commodo elit at imperdiet dui. Vestibulum morbi blandit cursus risus at ultrices.
Quis ipsum suspendisse ultrices gravida dictum. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Vitae proin sagittis nisl rhoncus mattis rhoncus urna. Eget arcu dictum varius duis at consectetur lorem donec massa. Morbi tincidunt ornare massa eget. Ornare arcu dui vivamus arcu felis. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Aliquet nec ullamcorper sit amet. Dignissim enim sit amet venenatis urna cursus eget. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Non consectetur a erat nam at. Ut morbi tincidunt augue interdum velit. Ridiculus mus mauris vitae ultricies leo integer malesuada.
Ipsum dolor sit amet consectetur adipiscing. Blandit cursus risus at ultrices mi tempus imperdiet. Risus nullam eget felis eget. A lacus vestibulum sed arcu non. Tristique magna sit amet purus gravida quis blandit turpis cursus. Imperdiet nulla malesuada pellentesque elit. Nec dui nunc mattis enim ut tellus elementum sagittis. Ac placerat vestibulum lectus mauris. Facilisi etiam dignissim diam quis enim. Suspendisse faucibus interdum posuere lorem ipsum dolor. Mattis rhoncus urna neque viverra justo nec ultrices. Luctus accumsan tortor posuere ac ut consequat semper viverra nam. At varius vel pharetra vel turpis nunc eget. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Ut morbi tincidunt augue interdum velit euismod in.
Etiam tempor orci eu lobortis elementum nibh. Libero volutpat sed cras ornare arcu. Risus sed vulputate odio ut enim. Iaculis nunc sed augue lacus viverra vitae. Enim neque volutpat ac tincidunt vitae. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet dui. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet. Ullamcorper a lacus vestibulum sed arcu. In dictum non consectetur a erat. Varius quam quisque id diam vel quam elementum. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla. Sed viverra tellus in hac habitasse platea dictumst. Amet cursus sit amet dictum sit amet. Elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Non tellus orci ac auctor augue mauris.
Ut lectus arcu bibendum at varius vel. Arcu felis bibendum ut tristique et egestas quis. Sit amet commodo nulla facilisi nullam vehicula ipsum. Tellus cras adipiscing enim eu turpis egestas pretium. Imperdiet massa tincidunt nunc pulvinar sapien et. Integer eget aliquet nibh praesent tristique magna sit. Lacinia at quis risus sed vulputate odio ut. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Aenean pharetra magna ac placerat vestibulum. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Viverra nam libero justo laoreet sit amet cursus sit amet. Diam vel quam elementum pulvinar. Massa vitae tortor condimentum lacinia quis vel eros donec ac.
<div class="hover-scroll h-400px px-5">
...
</div>
Hover Overlay
.hover-scroll-overlay-yin a HTML container with a suitable fixed height to display the scrollbar with an overlay on hover. This ensures that the scrollbar is always within the specifiec container:
<div class="hover-scroll-overlay-y h-400px px-5">
...
</div>
Auto Height
Click hereto centralize the page to the scrolling container. You can try to resize your browser height and see the scroll container automatically re-calculates its own height to fit within the viewport at all times.
This is a header
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo vel fringilla est ullamcorper eget nulla. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. Sed faucibus turpis in eu mi. Velit egestas dui id ornare arcu odio. Arcu non odio euismod lacinia at quis risus sed vulputate. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Vehicula ipsum a arcu cursus. Gravida neque convallis a cras semper. Amet massa vitae tortor condimentum. Lectus mauris ultrices eros in cursus turpis massa. Orci sagittis eu volutpat odio facilisis mauris sit amet. Hac habitasse platea dictumst quisque sagittis purus sit amet volutpat. Erat pellentesque adipiscing commodo elit at imperdiet dui. Vestibulum morbi blandit cursus risus at ultrices.
Quis ipsum suspendisse ultrices gravida dictum. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Vitae proin sagittis nisl rhoncus mattis rhoncus urna. Eget arcu dictum varius duis at consectetur lorem donec massa. Morbi tincidunt ornare massa eget. Ornare arcu dui vivamus arcu felis. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Aliquet nec ullamcorper sit amet. Dignissim enim sit amet venenatis urna cursus eget. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Non consectetur a erat nam at. Ut morbi tincidunt augue interdum velit. Ridiculus mus mauris vitae ultricies leo integer malesuada.
Ipsum dolor sit amet consectetur adipiscing. Blandit cursus risus at ultrices mi tempus imperdiet. Risus nullam eget felis eget. A lacus vestibulum sed arcu non. Tristique magna sit amet purus gravida quis blandit turpis cursus. Imperdiet nulla malesuada pellentesque elit. Nec dui nunc mattis enim ut tellus elementum sagittis. Ac placerat vestibulum lectus mauris. Facilisi etiam dignissim diam quis enim. Suspendisse faucibus interdum posuere lorem ipsum dolor. Mattis rhoncus urna neque viverra justo nec ultrices. Luctus accumsan tortor posuere ac ut consequat semper viverra nam. At varius vel pharetra vel turpis nunc eget. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Ut morbi tincidunt augue interdum velit euismod in.
Etiam tempor orci eu lobortis elementum nibh. Libero volutpat sed cras ornare arcu. Risus sed vulputate odio ut enim. Iaculis nunc sed augue lacus viverra vitae. Enim neque volutpat ac tincidunt vitae. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet dui. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet. Ullamcorper a lacus vestibulum sed arcu. In dictum non consectetur a erat. Varius quam quisque id diam vel quam elementum. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla. Sed viverra tellus in hac habitasse platea dictumst. Amet cursus sit amet dictum sit amet. Elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Non tellus orci ac auctor augue mauris.
Ut lectus arcu bibendum at varius vel. Arcu felis bibendum ut tristique et egestas quis. Sit amet commodo nulla facilisi nullam vehicula ipsum. Tellus cras adipiscing enim eu turpis egestas pretium. Imperdiet massa tincidunt nunc pulvinar sapien et. Integer eget aliquet nibh praesent tristique magna sit. Lacinia at quis risus sed vulputate odio ut. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Aenean pharetra magna ac placerat vestibulum. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Viverra nam libero justo laoreet sit amet cursus sit amet. Diam vel quam elementum pulvinar. Massa vitae tortor condimentum lacinia quis vel eros donec ac.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo vel fringilla est ullamcorper eget nulla. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. Sed faucibus turpis in eu mi. Velit egestas dui id ornare arcu odio. Arcu non odio euismod lacinia at quis risus sed vulputate. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Vehicula ipsum a arcu cursus. Gravida neque convallis a cras semper. Amet massa vitae tortor condimentum. Lectus mauris ultrices eros in cursus turpis massa. Orci sagittis eu volutpat odio facilisis mauris sit amet. Hac habitasse platea dictumst quisque sagittis purus sit amet volutpat. Erat pellentesque adipiscing commodo elit at imperdiet dui. Vestibulum morbi blandit cursus risus at ultrices.
Quis ipsum suspendisse ultrices gravida dictum. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Vitae proin sagittis nisl rhoncus mattis rhoncus urna. Eget arcu dictum varius duis at consectetur lorem donec massa. Morbi tincidunt ornare massa eget. Ornare arcu dui vivamus arcu felis. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Aliquet nec ullamcorper sit amet. Dignissim enim sit amet venenatis urna cursus eget. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Non consectetur a erat nam at. Ut morbi tincidunt augue interdum velit. Ridiculus mus mauris vitae ultricies leo integer malesuada.
Ipsum dolor sit amet consectetur adipiscing. Blandit cursus risus at ultrices mi tempus imperdiet. Risus nullam eget felis eget. A lacus vestibulum sed arcu non. Tristique magna sit amet purus gravida quis blandit turpis cursus. Imperdiet nulla malesuada pellentesque elit. Nec dui nunc mattis enim ut tellus elementum sagittis. Ac placerat vestibulum lectus mauris. Facilisi etiam dignissim diam quis enim. Suspendisse faucibus interdum posuere lorem ipsum dolor. Mattis rhoncus urna neque viverra justo nec ultrices. Luctus accumsan tortor posuere ac ut consequat semper viverra nam. At varius vel pharetra vel turpis nunc eget. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Ut morbi tincidunt augue interdum velit euismod in.
Etiam tempor orci eu lobortis elementum nibh. Libero volutpat sed cras ornare arcu. Risus sed vulputate odio ut enim. Iaculis nunc sed augue lacus viverra vitae. Enim neque volutpat ac tincidunt vitae. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet dui. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet. Ullamcorper a lacus vestibulum sed arcu. In dictum non consectetur a erat. Varius quam quisque id diam vel quam elementum. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla. Sed viverra tellus in hac habitasse platea dictumst. Amet cursus sit amet dictum sit amet. Elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Non tellus orci ac auctor augue mauris.
Ut lectus arcu bibendum at varius vel. Arcu felis bibendum ut tristique et egestas quis. Sit amet commodo nulla facilisi nullam vehicula ipsum. Tellus cras adipiscing enim eu turpis egestas pretium. Imperdiet massa tincidunt nunc pulvinar sapien et. Integer eget aliquet nibh praesent tristique magna sit. Lacinia at quis risus sed vulputate odio ut. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Aenean pharetra magna ac placerat vestibulum. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Viverra nam libero justo laoreet sit amet cursus sit amet. Diam vel quam elementum pulvinar. Massa vitae tortor condimentum lacinia quis vel eros donec ac.
This is a footer
<!--begin::Header-->
<h3 id="kt_example_js_header" class="pb-5">This is a header</h3>
<!--end::Header-->
<!--begin::Scroll-->
<div class="scroll pe-5"
data-kt-scroll="true"
data-kt-scroll-height="auto"
data-kt-scroll-wrappers="#kt_example_js_content"
data-kt-scroll-dependencies="#kt_example_js_header, #kt_example_js_footer, #kt_header"
data-kt-scroll-offset="100px">
<div id="kt_example_js_content">
...
</div>
</div>
<!--end::Scroll-->
<!--begin::Footer-->
<h3 id="kt_example_js_footer" class="pt-5">This is a footer</h3>
<!--end::Footer-->
Fixed Height
{default: '200px', lg: '300px'}which means the element's height is set
400pxfor breakpoints above
lgand
100pxfor breakpoints below
lg. Try to resize your browser screen to see this example in action.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo vel fringilla est ullamcorper eget nulla. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. Sed faucibus turpis in eu mi. Velit egestas dui id ornare arcu odio. Arcu non odio euismod lacinia at quis risus sed vulputate. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Vehicula ipsum a arcu cursus. Gravida neque convallis a cras semper. Amet massa vitae tortor condimentum. Lectus mauris ultrices eros in cursus turpis massa. Orci sagittis eu volutpat odio facilisis mauris sit amet. Hac habitasse platea dictumst quisque sagittis purus sit amet volutpat. Erat pellentesque adipiscing commodo elit at imperdiet dui. Vestibulum morbi blandit cursus risus at ultrices.
Quis ipsum suspendisse ultrices gravida dictum. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Vitae proin sagittis nisl rhoncus mattis rhoncus urna. Eget arcu dictum varius duis at consectetur lorem donec massa. Morbi tincidunt ornare massa eget. Ornare arcu dui vivamus arcu felis. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Aliquet nec ullamcorper sit amet. Dignissim enim sit amet venenatis urna cursus eget. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Non consectetur a erat nam at. Ut morbi tincidunt augue interdum velit. Ridiculus mus mauris vitae ultricies leo integer malesuada.
Ipsum dolor sit amet consectetur adipiscing. Blandit cursus risus at ultrices mi tempus imperdiet. Risus nullam eget felis eget. A lacus vestibulum sed arcu non. Tristique magna sit amet purus gravida quis blandit turpis cursus. Imperdiet nulla malesuada pellentesque elit. Nec dui nunc mattis enim ut tellus elementum sagittis. Ac placerat vestibulum lectus mauris. Facilisi etiam dignissim diam quis enim. Suspendisse faucibus interdum posuere lorem ipsum dolor. Mattis rhoncus urna neque viverra justo nec ultrices. Luctus accumsan tortor posuere ac ut consequat semper viverra nam. At varius vel pharetra vel turpis nunc eget. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Ut morbi tincidunt augue interdum velit euismod in.
Etiam tempor orci eu lobortis elementum nibh. Libero volutpat sed cras ornare arcu. Risus sed vulputate odio ut enim. Iaculis nunc sed augue lacus viverra vitae. Enim neque volutpat ac tincidunt vitae. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet dui. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet. Ullamcorper a lacus vestibulum sed arcu. In dictum non consectetur a erat. Varius quam quisque id diam vel quam elementum. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla. Sed viverra tellus in hac habitasse platea dictumst. Amet cursus sit amet dictum sit amet. Elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Non tellus orci ac auctor augue mauris.
Ut lectus arcu bibendum at varius vel. Arcu felis bibendum ut tristique et egestas quis. Sit amet commodo nulla facilisi nullam vehicula ipsum. Tellus cras adipiscing enim eu turpis egestas pretium. Imperdiet massa tincidunt nunc pulvinar sapien et. Integer eget aliquet nibh praesent tristique magna sit. Lacinia at quis risus sed vulputate odio ut. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Aenean pharetra magna ac placerat vestibulum. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Viverra nam libero justo laoreet sit amet cursus sit amet. Diam vel quam elementum pulvinar. Massa vitae tortor condimentum lacinia quis vel eros donec ac.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo vel fringilla est ullamcorper eget nulla. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. Sed faucibus turpis in eu mi. Velit egestas dui id ornare arcu odio. Arcu non odio euismod lacinia at quis risus sed vulputate. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Vehicula ipsum a arcu cursus. Gravida neque convallis a cras semper. Amet massa vitae tortor condimentum. Lectus mauris ultrices eros in cursus turpis massa. Orci sagittis eu volutpat odio facilisis mauris sit amet. Hac habitasse platea dictumst quisque sagittis purus sit amet volutpat. Erat pellentesque adipiscing commodo elit at imperdiet dui. Vestibulum morbi blandit cursus risus at ultrices.
Quis ipsum suspendisse ultrices gravida dictum. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Vitae proin sagittis nisl rhoncus mattis rhoncus urna. Eget arcu dictum varius duis at consectetur lorem donec massa. Morbi tincidunt ornare massa eget. Ornare arcu dui vivamus arcu felis. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Aliquet nec ullamcorper sit amet. Dignissim enim sit amet venenatis urna cursus eget. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Non consectetur a erat nam at. Ut morbi tincidunt augue interdum velit. Ridiculus mus mauris vitae ultricies leo integer malesuada.
Ipsum dolor sit amet consectetur adipiscing. Blandit cursus risus at ultrices mi tempus imperdiet. Risus nullam eget felis eget. A lacus vestibulum sed arcu non. Tristique magna sit amet purus gravida quis blandit turpis cursus. Imperdiet nulla malesuada pellentesque elit. Nec dui nunc mattis enim ut tellus elementum sagittis. Ac placerat vestibulum lectus mauris. Facilisi etiam dignissim diam quis enim. Suspendisse faucibus interdum posuere lorem ipsum dolor. Mattis rhoncus urna neque viverra justo nec ultrices. Luctus accumsan tortor posuere ac ut consequat semper viverra nam. At varius vel pharetra vel turpis nunc eget. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Ut morbi tincidunt augue interdum velit euismod in.
Etiam tempor orci eu lobortis elementum nibh. Libero volutpat sed cras ornare arcu. Risus sed vulputate odio ut enim. Iaculis nunc sed augue lacus viverra vitae. Enim neque volutpat ac tincidunt vitae. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet dui. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet. Ullamcorper a lacus vestibulum sed arcu. In dictum non consectetur a erat. Varius quam quisque id diam vel quam elementum. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla. Sed viverra tellus in hac habitasse platea dictumst. Amet cursus sit amet dictum sit amet. Elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Non tellus orci ac auctor augue mauris.
Ut lectus arcu bibendum at varius vel. Arcu felis bibendum ut tristique et egestas quis. Sit amet commodo nulla facilisi nullam vehicula ipsum. Tellus cras adipiscing enim eu turpis egestas pretium. Imperdiet massa tincidunt nunc pulvinar sapien et. Integer eget aliquet nibh praesent tristique magna sit. Lacinia at quis risus sed vulputate odio ut. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Aenean pharetra magna ac placerat vestibulum. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Viverra nam libero justo laoreet sit amet cursus sit amet. Diam vel quam elementum pulvinar. Massa vitae tortor condimentum lacinia quis vel eros donec ac.
<!--begin::Scroll-->
<div class="scroll pe-5"
data-kt-scroll="true"
data-kt-scroll-height="{default: '100px', lg: '300px'}">
...
</div>
<!--end::Scroll-->
Change Scroll Position
{default: '200px', lg: '300px'}which means the element's height is set
400pxfor breakpoints above
lgand
100pxfor breakpoints below
lg. Try to resize your browser screen to see this example in action.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo vel fringilla est ullamcorper eget nulla. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. Sed faucibus turpis in eu mi. Velit egestas dui id ornare arcu odio. Arcu non odio euismod lacinia at quis risus sed vulputate. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Vehicula ipsum a arcu cursus. Gravida neque convallis a cras semper. Amet massa vitae tortor condimentum. Lectus mauris ultrices eros in cursus turpis massa. Orci sagittis eu volutpat odio facilisis mauris sit amet. Hac habitasse platea dictumst quisque sagittis purus sit amet volutpat. Erat pellentesque adipiscing commodo elit at imperdiet dui. Vestibulum morbi blandit cursus risus at ultrices.
Quis ipsum suspendisse ultrices gravida dictum. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Vitae proin sagittis nisl rhoncus mattis rhoncus urna. Eget arcu dictum varius duis at consectetur lorem donec massa. Morbi tincidunt ornare massa eget. Ornare arcu dui vivamus arcu felis. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Aliquet nec ullamcorper sit amet. Dignissim enim sit amet venenatis urna cursus eget. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Non consectetur a erat nam at. Ut morbi tincidunt augue interdum velit. Ridiculus mus mauris vitae ultricies leo integer malesuada.
Ipsum dolor sit amet consectetur adipiscing. Blandit cursus risus at ultrices mi tempus imperdiet. Risus nullam eget felis eget. A lacus vestibulum sed arcu non. Tristique magna sit amet purus gravida quis blandit turpis cursus. Imperdiet nulla malesuada pellentesque elit. Nec dui nunc mattis enim ut tellus elementum sagittis. Ac placerat vestibulum lectus mauris. Facilisi etiam dignissim diam quis enim. Suspendisse faucibus interdum posuere lorem ipsum dolor. Mattis rhoncus urna neque viverra justo nec ultrices. Luctus accumsan tortor posuere ac ut consequat semper viverra nam. At varius vel pharetra vel turpis nunc eget. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Ut morbi tincidunt augue interdum velit euismod in.
Etiam tempor orci eu lobortis elementum nibh. Libero volutpat sed cras ornare arcu. Risus sed vulputate odio ut enim. Iaculis nunc sed augue lacus viverra vitae. Enim neque volutpat ac tincidunt vitae. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet dui. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet. Ullamcorper a lacus vestibulum sed arcu. In dictum non consectetur a erat. Varius quam quisque id diam vel quam elementum. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla. Sed viverra tellus in hac habitasse platea dictumst. Amet cursus sit amet dictum sit amet. Elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Non tellus orci ac auctor augue mauris.
Ut lectus arcu bibendum at varius vel. Arcu felis bibendum ut tristique et egestas quis. Sit amet commodo nulla facilisi nullam vehicula ipsum. Tellus cras adipiscing enim eu turpis egestas pretium. Imperdiet massa tincidunt nunc pulvinar sapien et. Integer eget aliquet nibh praesent tristique magna sit. Lacinia at quis risus sed vulputate odio ut. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Aenean pharetra magna ac placerat vestibulum. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Viverra nam libero justo laoreet sit amet cursus sit amet. Diam vel quam elementum pulvinar. Massa vitae tortor condimentum lacinia quis vel eros donec ac.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo vel fringilla est ullamcorper eget nulla. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. Sed faucibus turpis in eu mi. Velit egestas dui id ornare arcu odio. Arcu non odio euismod lacinia at quis risus sed vulputate. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Vehicula ipsum a arcu cursus. Gravida neque convallis a cras semper. Amet massa vitae tortor condimentum. Lectus mauris ultrices eros in cursus turpis massa. Orci sagittis eu volutpat odio facilisis mauris sit amet. Hac habitasse platea dictumst quisque sagittis purus sit amet volutpat. Erat pellentesque adipiscing commodo elit at imperdiet dui. Vestibulum morbi blandit cursus risus at ultrices.
Quis ipsum suspendisse ultrices gravida dictum. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Vitae proin sagittis nisl rhoncus mattis rhoncus urna. Eget arcu dictum varius duis at consectetur lorem donec massa. Morbi tincidunt ornare massa eget. Ornare arcu dui vivamus arcu felis. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Aliquet nec ullamcorper sit amet. Dignissim enim sit amet venenatis urna cursus eget. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Non consectetur a erat nam at. Ut morbi tincidunt augue interdum velit. Ridiculus mus mauris vitae ultricies leo integer malesuada.
Ipsum dolor sit amet consectetur adipiscing. Blandit cursus risus at ultrices mi tempus imperdiet. Risus nullam eget felis eget. A lacus vestibulum sed arcu non. Tristique magna sit amet purus gravida quis blandit turpis cursus. Imperdiet nulla malesuada pellentesque elit. Nec dui nunc mattis enim ut tellus elementum sagittis. Ac placerat vestibulum lectus mauris. Facilisi etiam dignissim diam quis enim. Suspendisse faucibus interdum posuere lorem ipsum dolor. Mattis rhoncus urna neque viverra justo nec ultrices. Luctus accumsan tortor posuere ac ut consequat semper viverra nam. At varius vel pharetra vel turpis nunc eget. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Ut morbi tincidunt augue interdum velit euismod in.
Etiam tempor orci eu lobortis elementum nibh. Libero volutpat sed cras ornare arcu. Risus sed vulputate odio ut enim. Iaculis nunc sed augue lacus viverra vitae. Enim neque volutpat ac tincidunt vitae. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet dui. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet. Ullamcorper a lacus vestibulum sed arcu. In dictum non consectetur a erat. Varius quam quisque id diam vel quam elementum. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla. Sed viverra tellus in hac habitasse platea dictumst. Amet cursus sit amet dictum sit amet. Elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Non tellus orci ac auctor augue mauris.
Ut lectus arcu bibendum at varius vel. Arcu felis bibendum ut tristique et egestas quis. Sit amet commodo nulla facilisi nullam vehicula ipsum. Tellus cras adipiscing enim eu turpis egestas pretium. Imperdiet massa tincidunt nunc pulvinar sapien et. Integer eget aliquet nibh praesent tristique magna sit. Lacinia at quis risus sed vulputate odio ut. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Aenean pharetra magna ac placerat vestibulum. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Viverra nam libero justo laoreet sit amet cursus sit amet. Diam vel quam elementum pulvinar. Massa vitae tortor condimentum lacinia quis vel eros donec ac.
var scroll = document.querySelector("#kt_scroll_change_pos");
var btnTop = document.querySelector("#kt_scroll_change_pos_top");
var btnBottom = document.querySelector("#kt_scroll_change_pos_bottom");
btnTop.addEventListener("click", function (e) {
scroll.scrollTop = 0;
});
btnBottom.addEventListener("click", function (e) {
scroll.scrollTop = parseInt(scroll.scrollHeight);
});
<!--begin::Scroll-->
<div class="scroll pe-5"
data-kt-scroll="true"
data-kt-scroll-height="{default: '100px', lg: '300px'}">
...
</div>
<!--end::Scroll-->
Markup Reference
| Name | Description |
|---|---|
scroll
|
Enabled our custom scroll bar |
scroll-x
|
Explicitly defines scrolling on the X-axis |
scroll-y
|
Explicitly defines scrolling on the Y-axis |
hover-scroll
|
Displays scrollbar only on hover. Scrollbar is hidden by default. |
hover-scroll-x
|
Displays scrollbar only on hover explicitly defined for X-axis. Scrollbar is hidden by default. |
hover-scroll-y
|
Displays scrollbar only on hover explicitly defined for Y-axis. Scrollbar is hidden by default. |
hover-scroll-overlay-y
|
Enables an overlay scrollbar for the Y-axis and only displays on hover. |
.scrollclass. For example, if you require the scrollbar to appear on hover,
.hover-scrollis only required.| Name | Type | Description |
|---|---|---|
data-kt-scroll
|
mandatory
|
Accepts
trueand
falsevalues, when
trueis set
KTScrollJavascript class automatically initializes the scroll instance with smart height calculation. |
data-kt-scroll-activate
|
mandatory
|
Specifies the specific breakpoint to enable or disable the smart height calculation.
It uses Bootstrap's standard breakpoint sizing (eg:
For example:
sm, md, lg, xl) with a
trueor
falsevalue. This attribute value can be written as an object string to enable multiple responsive breakpoints.{default: false, lg: true}specifies that the smart height calculation will only fire on
lgscreen sizes and above. |
data-kt-scroll-height
|
mandatory
|
Defines the scroll container height. It accepts all values similar with CSS
heightstyling. For example:
auto,
100%or
500px.You can also use the Bootstrap's standard breakpoint size options
When
sm, md, lg, xl) to specify conditional height values for different screen sizes. For example:
{default: '200px', lg: '400px'}autovalue is set, Scroll does the smart height calculation by subtracting from browser's window height, the dependencies and wrapper elements heights, such as border width, padding top, padding bottom, margin top and margin bottom style values dynamically. |
data-kt-scroll-min-height
|
optional
|
Defines the scroll container minimum height. It accepts all values similar with CSS
When
min-heightstyling. For example:
auto,
100%or
500px.autovalue is set, Scroll does the smart minimum height calculation by subtracting from browser's window height, the dependencies and wrapper elements heights, such as border width, padding top, padding bottom, margin top and margin bottom style values dynamically. |
data-kt-scroll-max-height
|
optional
|
Defines the scroll container maximum height. It accepts all values similar with CSS
When
max-heightstyling. For example:
auto,
100%or
500px.autovalue is set, Scroll does the smart maximum height calculation by subtracting from browser's window height, the dependencies and wrapper elements heights, such as border width, padding top, padding bottom, margin top and margin bottom style values dynamically. |
data-kt-scroll-dependencies
|
optional
|
Defines the HTML elements to include in the smart height calculation to ensure that the main scroll container will have the correct height size to be displayed along with the included HTML elements within the viewport. This calculation also includes border, margins and padding spacings.
For example, if the dependant elements calculates up to
It accepts HTML
200pxwith all borders, margins and paddings included. The smart height calculation will return the size of the viewport height (
100vhheight) minus
200px.
idstring values that can be separated by commas (
,) for selecting multiple HTML elements. For example:
#kt_aside_logo, #kt_aside_footer. |
data-kt-scroll-wrappers
|
optional
|
Defines which related HTML elements border width, padding top, padding bottom, margin top and margin bottom to be subtracted from the smart height calculation.
Typically used to define the parent/ancenstor HTML element to ensure that the scroll container doesn't overlap over the parent element's border, padding or margin spacings. However, there's no limit to the number of HTML elements that can be defined here. Accepts Javascript HTML elements query selector string. For example:
#kt_aside_menuor
#kt_aside_menu, #kt_aside_footer, #kt_aside_body |
data-kt-scroll-offset
|
optional
|
Defines a CSS value in
pxas offset to substitude in the smart height calculation. For example:
20px.You can also use the Bootstrap's standard breakpoint size options (
sm, md, lg, xl) to specify conditional height values for different screen sizes. For example:
{default: '20px', lg: '40px'} |
data-kt-scroll-save-state
|
optional
|
Accepts
trueand
falsevalues, when
trueis set
KTScrollremembers last scroll position in user Cookies and on page reload automatically initializes the scroll with last scrolled position.This feature requires HTML ID attribute to be set for a select element in order to use it as unique identificator in user Cookie.
|
API Methods
| Name | Description |
|---|---|
| Static Methods | |
createInstances(DOMString selector)
|
Initializes Scroll instances by selector. Default value of
selectoris
[data-kt-scroll="true"]. This method can be used to initialize dynamicly populated Scroll instances(e.g: after Ajax request).
|
getInstance(DOMElement element)
|
Get the Scroll instance created
|
| Public Methods | |
KTScroll(DOMElement element, Object options)
|
Constructs a new instance of
KTScrollclass and initializes a Scroll control:
Remove
data-kt-scroll="true"attribute to avoid lazy initialization. Option
saveStatereplicates
data-kt-scroll-save-stateoption functionaliy as described above. |
getHeight
|
Gets the current scroll container height
|
update
|
Force the scroll container to update itself.
|
getElement
|
Returns the Scroll's attached DOM element.
|
