Different Types of scroll design examples with Bootstrap 4. Here you can show scroll design like light-thick,rounded-dots,3d-thick,3d and rounded-dark. this scroll design you can use at div when div content overflow. this is very professional and nice scroll plugin design. this scrolling plugin support in all browser.

We allows to free snippets of custom scrollbar css for div , you can download full code of css scrollbar style examples layout. Here in this post i will give you example of custom scrollbar css for all browsers snippet and you will get simple code of html, css and jquery. In scroll design html css snippet i give you three tab with html, css and js, you can easily get code of bootstrap scroll div layout.


<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="custom.css"> </head> <body class="text-white"> <div class="container"> <div class="row mt-4"> <div class="col-md-4 col-12"> <div class="content mCustomScrollbar rounded p-3 mb-4 bg-success" id="content-1" data-mcs-theme="minimal-dark"> <h2>Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div class="col-md-4 col-12"> <div class="content rounded p-3 mb-4 bg-primary" id="content-2"> <h2>Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div class="col-md-4 col-12"> <div class="content rounded p-3 mb-4 bg-info" id="content-3"> <h2>Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </div> <div class="row"> <div class="col-md-4 col-12"> <div class="content rounded p-3 mb-4 bg-danger" id="content-4"> <h2>Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div class="col-md-4 col-12"> <div class="content rounded p-3 mb-4 bg-dark" id="content-5"> <h2>Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div class="col-md-4 col-12"> <div class="content rounded p-3 mb-4 bg-success" id="content-6"> <h2>Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </div> </div> </body> </html>
body{ font-family: 'Ropa Sans', sans-serif; } .content{ height: 300px; }
(function($){ $(window).load(function(){ $("#content-2").mCustomScrollbar({ scrollButtons:{enable:true}, theme:"light-thick", }); $("#content-3").mCustomScrollbar({ theme:"rounded-dots", scrollInertia:400, }); $("#content-4").mCustomScrollbar({ scrollButtons:{enable:true}, theme:"3d-thick", }); $("#content-5").mCustomScrollbar({ scrollButtons:{enable:true}, theme:"3d", }); $("#content-6").mCustomScrollbar({ scrollButtons:{enable:true,scrollType:"stepped"}, keyboard:{scrollType:"stepped"}, mouseWheel:{scrollAmount:188,normalizeDelta:true}, theme:"rounded-dark", autoExpandScrollbar:true, snapAmount:188, snapOffset:65, }); }); })(jQuery);

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Related Post

Scroll to top button using bootstrap sample code

Scroll to top button using bootstrap sample code

sample code of scroll to top button. scroll to top without loading simple exampl...

Read More
Bootstrap tab scroll with content usign bootstrap scrollspy

Bootstrap tab scroll with content usign bootstrap scrollspy

In this bootstrap scrollspy demo we try to explain how to wirk scrollspy. in thi...

Read More
Bootstrap nested nav with scrollspy

Bootstrap nested nav with scrollspy

This is example of bootstrap nested nav with scrollspy. also you can scroll righ...

Read More

Random Post