Scrollbar (custom)
SimpleBar replace the browser's default scrollbar with a custom CSS-styled one.
Don't forget to limit the height of the container so that vertical scrolling works properly.
Vertical
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi ex natus distinctio, alias necessitatibus corporis soluta ipsa commodi nulla voluptates vero doloribus totam maiores sint porro voluptate facilis? Quod ratione provident maxime quidem pariatur nam ducimus libero doloremque dicta! Esse, debitis rem! Placeat voluptates quas quae aut harum pariatur sit deleniti eius vel, tempore quam quis consequatur iure quaerat cupiditate ut nulla maiores recusandae corrupti temporibus asperiores et molestiae! Suscipit rerum quis consectetur sunt non! Iusto magni molestias corporis quae ad. Facilis, laudantium veritatis esse, eos exercitationem, modi maxime consequuntur provident odit dolorum necessitatibus dolores. Alias laudantium et nobis aut!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae voluptate quae maxime animi qui. Mollitia, ipsam! Dignissimos expedita delectus facilis voluptates saepe iusto porro atque? Molestiae, autem consectetur, corrupti earum odit saepe, corporis soluta quibusdam minima fuga ipsam iure optio incidunt veniam et dolore. Ratione aliquam sunt, ipsam delectus corrupti dolor asperiores debitis cupiditate nulla inventore, error eligendi doloribus. Debitis voluptatem sapiente earum corporis reiciendis, consequuntur quam ad id nulla tempora rem neque, nihil consequatur rerum aperiam error aspernatur iusto modi. Beatae totam veritatis ratione quibusdam voluptates nihil sapiente facere praesentium sequi laboriosam illum aliquid, recusandae doloremque quas doloribus assumenda?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque ex aliquam sed veritatis illo dignissimos eveniet! Laudantium eius ratione dolorem perferendis consequuntur quibusdam fugiat et, sunt pariatur molestias dolore sequi sapiente, dolores architecto beatae deleniti labore obcaecati. Dolore laudantium voluptatem illo sapiente. Beatae eos consequatur odio, unde mollitia alias sed! Expedita provident voluptatum alias suscipit laudantium quas, quidem iste veniam consectetur excepturi? Voluptatem iste consequuntur quasi dolores, mollitia quia aliquam veniam beatae porro architecto incidunt veritatis suscipit magnam saepe est sequi exercitationem? Voluptatibus inventore fuga saepe quod magni et, possimus temporibus enim, exercitationem labore architecto commodi esse, a libero atque.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque ex aliquam sed veritatis illo dignissimos eveniet! Laudantium eius ratione dolorem perferendis consequuntur quibusdam fugiat et, sunt pariatur molestias dolore sequi sapiente, dolores architecto beatae deleniti labore obcaecati. Dolore laudantium voluptatem illo sapiente. Beatae eos consequatur odio, unde mollitia alias sed! Expedita provident voluptatum alias suscipit laudantium quas, quidem iste veniam consectetur excepturi? Voluptatem iste consequuntur quasi dolores, mollitia quia aliquam veniam beatae porro architecto incidunt veritatis suscipit magnam saepe est sequi exercitationem? Voluptatibus inventore fuga saepe quod magni et, possimus temporibus enim, exercitationem labore architecto commodi esse, a libero atque.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque ex aliquam sed veritatis illo dignissimos eveniet! Laudantium eius ratione dolorem perferendis consequuntur quibusdam fugiat et, sunt pariatur molestias dolore sequi sapiente, dolores architecto beatae deleniti labore obcaecati. Dolore laudantium voluptatem illo sapiente. Beatae eos consequatur odio, unde mollitia alias sed! Expedita provident voluptatum alias suscipit laudantium quas, quidem iste veniam consectetur excepturi? Voluptatem iste consequuntur quasi dolores, mollitia quia aliquam veniam beatae porro architecto incidunt veritatis suscipit magnam saepe est sequi exercitationem? Voluptatibus inventore fuga saepe quod magni et, possimus temporibus enim, exercitationem labore architecto commodi esse, a libero atque.
<!-- Basic vertical scrollbar -->
<div class="pe-3" style="max-height: 30vh;" data-simplebar data-simplebar-auto-hide="false">
...
</div>
Horizontal
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi ex natus distinctio, alias necessitatibus corporis soluta ipsa commodi nulla voluptates vero doloribus totam maiores sint porro voluptate facilis? Quod ratione provident maxime quidem pariatur nam ducimus libero doloremque dicta! Esse, debitis rem! Quod ratione provident maxime quidem pariatur nam ducimus libero doloremque dicta! Esse, debitis rem!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi ex natus distinctio, alias necessitatibus corporis soluta ipsa commodi nulla voluptates vero doloribus totam maiores sint porro voluptate facilis? Quod ratione provident maxime quidem pariatur nam ducimus libero doloremque dicta! Esse, debitis rem! Quod ratione provident maxime quidem pariatur nam ducimus libero doloremque dicta! Esse, debitis rem!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi ex natus distinctio, alias necessitatibus corporis soluta ipsa commodi nulla voluptates vero doloribus totam maiores sint porro voluptate facilis? Quod ratione provident maxime quidem pariatur nam ducimus libero doloremque dicta! Esse, debitis rem! Quod ratione provident maxime quidem pariatur nam ducimus libero doloremque dicta! Esse, debitis rem!
<!-- Basic horizontal scrollbar -->
<div class="pb-3" data-simplebar data-simplebar-auto-hide="false">
...
</div>
Horizontal: top
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi ex natus distinctio, alias necessitatibus corporis soluta ipsa commodi nulla voluptates vero doloribus totam maiores sint porro voluptate facilis? Quod ratione provident maxime quidem pariatur nam ducimus libero doloremque dicta! Esse, debitis rem! Quod ratione provident maxime quidem pariatur nam ducimus libero doloremque dicta! Esse, debitis rem!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi ex natus distinctio, alias necessitatibus corporis soluta ipsa commodi nulla voluptates vero doloribus totam maiores sint porro voluptate facilis? Quod ratione provident maxime quidem pariatur nam ducimus libero doloremque dicta! Esse, debitis rem! Quod ratione provident maxime quidem pariatur nam ducimus libero doloremque dicta! Esse, debitis rem!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi ex natus distinctio, alias necessitatibus corporis soluta ipsa commodi nulla voluptates vero doloribus totam maiores sint porro voluptate facilis? Quod ratione provident maxime quidem pariatur nam ducimus libero doloremque dicta! Esse, debitis rem! Quod ratione provident maxime quidem pariatur nam ducimus libero doloremque dicta! Esse, debitis rem!
<!-- Basic horizontal scrollbar -->
<div class="pt-3" data-simplebar data-simplebar-auto-hide="false" data-simplebar-horizontal-top>
...
</div>
Autohide
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi ex natus distinctio, alias necessitatibus corporis soluta ipsa commodi nulla voluptates vero doloribus totam maiores sint porro voluptate facilis? Quod ratione provident maxime quidem pariatur nam ducimus libero doloremque dicta! Esse, debitis rem! Placeat voluptates quas quae aut harum pariatur sit deleniti eius vel, tempore quam quis consequatur iure quaerat cupiditate ut nulla maiores recusandae corrupti temporibus asperiores et molestiae! Suscipit rerum quis consectetur sunt non! Iusto magni molestias corporis quae ad. Facilis, laudantium veritatis esse, eos exercitationem, modi maxime consequuntur provident odit dolorum necessitatibus dolores. Alias laudantium et nobis aut!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae voluptate quae maxime animi qui. Mollitia, ipsam! Dignissimos expedita delectus facilis voluptates saepe iusto porro atque? Molestiae, autem consectetur, corrupti earum odit saepe, corporis soluta quibusdam minima fuga ipsam iure optio incidunt veniam et dolore. Ratione aliquam sunt, ipsam delectus corrupti dolor asperiores debitis cupiditate nulla inventore, error eligendi doloribus. Debitis voluptatem sapiente earum corporis reiciendis, consequuntur quam ad id nulla tempora rem neque, nihil consequatur rerum aperiam error aspernatur iusto modi. Beatae totam veritatis ratione quibusdam voluptates nihil sapiente facere praesentium sequi laboriosam illum aliquid, recusandae doloremque quas doloribus assumenda?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque ex aliquam sed veritatis illo dignissimos eveniet! Laudantium eius ratione dolorem perferendis consequuntur quibusdam fugiat et, sunt pariatur molestias dolore sequi sapiente, dolores architecto beatae deleniti labore obcaecati. Dolore laudantium voluptatem illo sapiente. Beatae eos consequatur odio, unde mollitia alias sed! Expedita provident voluptatum alias suscipit laudantium quas, quidem iste veniam consectetur excepturi? Voluptatem iste consequuntur quasi dolores, mollitia quia aliquam veniam beatae porro architecto incidunt veritatis suscipit magnam saepe est sequi exercitationem? Voluptatibus inventore fuga saepe quod magni et, possimus temporibus enim, exercitationem labore architecto commodi esse, a libero atque.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque ex aliquam sed veritatis illo dignissimos eveniet! Laudantium eius ratione dolorem perferendis consequuntur quibusdam fugiat et, sunt pariatur molestias dolore sequi sapiente, dolores architecto beatae deleniti labore obcaecati. Dolore laudantium voluptatem illo sapiente. Beatae eos consequatur odio, unde mollitia alias sed! Expedita provident voluptatum alias suscipit laudantium quas, quidem iste veniam consectetur excepturi? Voluptatem iste consequuntur quasi dolores, mollitia quia aliquam veniam beatae porro architecto incidunt veritatis suscipit magnam saepe est sequi exercitationem? Voluptatibus inventore fuga saepe quod magni et, possimus temporibus enim, exercitationem labore architecto commodi esse, a libero atque.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque ex aliquam sed veritatis illo dignissimos eveniet! Laudantium eius ratione dolorem perferendis consequuntur quibusdam fugiat et, sunt pariatur molestias dolore sequi sapiente, dolores architecto beatae deleniti labore obcaecati. Dolore laudantium voluptatem illo sapiente. Beatae eos consequatur odio, unde mollitia alias sed! Expedita provident voluptatum alias suscipit laudantium quas, quidem iste veniam consectetur excepturi? Voluptatem iste consequuntur quasi dolores, mollitia quia aliquam veniam beatae porro architecto incidunt veritatis suscipit magnam saepe est sequi exercitationem? Voluptatibus inventore fuga saepe quod magni et, possimus temporibus enim, exercitationem labore architecto commodi esse, a libero atque.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque ex aliquam sed veritatis illo dignissimos eveniet! Laudantium eius ratione dolorem perferendis consequuntur quibusdam fugiat et, sunt pariatur molestias dolore sequi sapiente, dolores architecto beatae deleniti labore obcaecati. Dolore laudantium voluptatem illo sapiente. Beatae eos consequatur odio, unde mollitia alias sed! Expedita provident voluptatum alias suscipit laudantium quas, quidem iste veniam consectetur excepturi? Voluptatem iste consequuntur quasi dolores, mollitia quia aliquam veniam beatae porro architecto incidunt veritatis suscipit magnam saepe est sequi exercitationem? Voluptatibus inventore fuga saepe quod magni et, possimus temporibus enim, exercitationem labore architecto commodi esse, a libero atque.
<!-- Scrollbar autohide -->
<div class="pe-3 pb-3" data-simplebar data-simplebar-auto-hide="true">
...
</div>
Light version
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi ex natus distinctio, alias necessitatibus corporis soluta ipsa commodi nulla voluptates vero doloribus totam maiores sint porro voluptate facilis? Quod ratione provident maxime quidem pariatur nam ducimus libero doloremque dicta! Esse, debitis rem! Placeat voluptates quas quae aut harum pariatur sit deleniti eius vel, tempore quam quis consequatur iure quaerat cupiditate ut nulla maiores recusandae corrupti temporibus asperiores et molestiae! Suscipit rerum quis consectetur sunt non! Iusto magni molestias corporis quae ad. Facilis, laudantium veritatis esse, eos exercitationem, modi maxime consequuntur provident odit dolorum necessitatibus dolores. Alias laudantium et nobis aut!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae voluptate quae maxime animi qui. Mollitia, ipsam! Dignissimos expedita delectus facilis voluptates saepe iusto porro atque? Molestiae, autem consectetur, corrupti earum odit saepe, corporis soluta quibusdam minima fuga ipsam iure optio incidunt veniam et dolore. Ratione aliquam sunt, ipsam delectus corrupti dolor asperiores debitis cupiditate nulla inventore, error eligendi doloribus. Debitis voluptatem sapiente earum corporis reiciendis, consequuntur quam ad id nulla tempora rem neque, nihil consequatur rerum aperiam error aspernatur iusto modi. Beatae totam veritatis ratione quibusdam voluptates nihil sapiente facere praesentium sequi laboriosam illum aliquid, recusandae doloremque quas doloribus assumenda?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque ex aliquam sed veritatis illo dignissimos eveniet! Laudantium eius ratione dolorem perferendis consequuntur quibusdam fugiat et, sunt pariatur molestias dolore sequi sapiente, dolores architecto beatae deleniti labore obcaecati. Dolore laudantium voluptatem illo sapiente. Beatae eos consequatur odio, unde mollitia alias sed! Expedita provident voluptatum alias suscipit laudantium quas, quidem iste veniam consectetur excepturi? Voluptatem iste consequuntur quasi dolores, mollitia quia aliquam veniam beatae porro architecto incidunt veritatis suscipit magnam saepe est sequi exercitationem? Voluptatibus inventore fuga saepe quod magni et, possimus temporibus enim, exercitationem labore architecto commodi esse, a libero atque.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque ex aliquam sed veritatis illo dignissimos eveniet! Laudantium eius ratione dolorem perferendis consequuntur quibusdam fugiat et, sunt pariatur molestias dolore sequi sapiente, dolores architecto beatae deleniti labore obcaecati. Dolore laudantium voluptatem illo sapiente. Beatae eos consequatur odio, unde mollitia alias sed! Expedita provident voluptatum alias suscipit laudantium quas, quidem iste veniam consectetur excepturi? Voluptatem iste consequuntur quasi dolores, mollitia quia aliquam veniam beatae porro architecto incidunt veritatis suscipit magnam saepe est sequi exercitationem? Voluptatibus inventore fuga saepe quod magni et, possimus temporibus enim, exercitationem labore architecto commodi esse, a libero atque.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque ex aliquam sed veritatis illo dignissimos eveniet! Laudantium eius ratione dolorem perferendis consequuntur quibusdam fugiat et, sunt pariatur molestias dolore sequi sapiente, dolores architecto beatae deleniti labore obcaecati. Dolore laudantium voluptatem illo sapiente. Beatae eos consequatur odio, unde mollitia alias sed! Expedita provident voluptatum alias suscipit laudantium quas, quidem iste veniam consectetur excepturi? Voluptatem iste consequuntur quasi dolores, mollitia quia aliquam veniam beatae porro architecto incidunt veritatis suscipit magnam saepe est sequi exercitationem? Voluptatibus inventore fuga saepe quod magni et, possimus temporibus enim, exercitationem labore architecto commodi esse, a libero atque.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi ex natus distinctio, alias necessitatibus corporis soluta ipsa commodi nulla voluptates vero doloribus totam maiores sint porro voluptate facilis? Quod ratione provident maxime quidem pariatur nam ducimus libero doloremque dicta! Esse, debitis rem! Quod ratione provident maxime quidem pariatur nam ducimus libero doloremque dicta! Esse, debitis rem!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi ex natus distinctio, alias necessitatibus corporis soluta ipsa commodi nulla voluptates vero doloribus totam maiores sint porro voluptate facilis? Quod ratione provident maxime quidem pariatur nam ducimus libero doloremque dicta! Esse, debitis rem! Quod ratione provident maxime quidem pariatur nam ducimus libero doloremque dicta! Esse, debitis rem!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi ex natus distinctio, alias necessitatibus corporis soluta ipsa commodi nulla voluptates vero doloribus totam maiores sint porro voluptate facilis? Quod ratione provident maxime quidem pariatur nam ducimus libero doloremque dicta! Esse, debitis rem! Quod ratione provident maxime quidem pariatur nam ducimus libero doloremque dicta! Esse, debitis rem!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi ex natus distinctio, alias necessitatibus corporis soluta ipsa commodi nulla voluptates vero doloribus totam maiores sint porro voluptate facilis? Quod ratione provident maxime quidem pariatur nam ducimus libero doloremque dicta! Esse, debitis rem! Quod ratione provident maxime quidem pariatur nam ducimus libero doloremque dicta! Esse, debitis rem!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi ex natus distinctio, alias necessitatibus corporis soluta ipsa commodi nulla voluptates vero doloribus totam maiores sint porro voluptate facilis? Quod ratione provident maxime quidem pariatur nam ducimus libero doloremque dicta! Esse, debitis rem! Quod ratione provident maxime quidem pariatur nam ducimus libero doloremque dicta! Esse, debitis rem!
<!-- Scrollbar light vertical -->
<div class="pe-3" style="max-height: 30vh;" data-simplebar data-simplebar-auto-hide="false" data-simplebar-inverse>
...
</div>
<!-- Scrollbar light horizontal -->
<div class="pb-3" data-simplebar data-simplebar-auto-hide="false" data-simplebar-inverse>
...
</div>