Horizontal custom scrollbar tutorial
Extensive tutorial for creating horizontally stacked content with the custom scrollbar plugin.
Demo
Toggle custom scrollbar on/off
Code examples
The following code examples assume you’ve already installed custom scrollbar plugin to your page.
Example with inline elements
Very simple markup and minimal CSS example with inline items and nowrap container
HTML
<div class="mcs-horizontal-example">
<img src="path/to/image" class="item" />
<img src="path/to/image" class="item" />
<img src="path/to/image" class="item" />
<!-- etc. -->
</div>
CSS
.mcs-horizontal-example{
overflow-x: auto;
white-space: nowrap;
}
.mcs-horizontal-example .item{
display: inline-block;
}
Javascript
(function($){
$(window).on("load",function(){
$(".mcs-horizontal-example").mCustomScrollbar({
axis:"x",
theme:"dark-3"
});
});
})(jQuery);
If content contains elements that change dynamically (e.g. items are added or removed on-the-fly) enable autoExpandHorizontalScroll option parameter:
$(".mcs-horizontal-example").mCustomScrollbar({
axis:"x",
theme:"dark-3",
advanced:{ autoExpandHorizontalScroll:true }
});
Example with floated elements
Commonly used markup with floated items
HTML
<div class="mcs-horizontal-example">
<a href="#" class="item"><img src="path/to/image" /></a>
<a href="#" class="item"><img src="path/to/image" /></a>
<a href="#" class="item"><img src="path/to/image" /></a>
<!-- etc. -->
</div>
CSS
.mcs-horizontal-example{
overflow-x: auto;
}
.mcs-horizontal-example .item{
display: block;
float: left;
}
Javascript
(function($){
$(window).on("load",function(){
$(".mcs-horizontal-example").mCustomScrollbar({
axis:"x",
theme:"dark-3",
advanced:{
autoExpandHorizontalScroll:true //optional (remove or set to false for non-dynamic/static elements)
}
});
});
})(jQuery);
Example with lists
Classic markup with an unordered list containing items with multiple elements
HTML
<div class="mcs-horizontal-example">
<ul>
<li>
<a href="#"><img src="path/to/image" /></a> <span>Some text...</span>
</li>
<li>
<a href="#"><img src="path/to/image" /></a> <span>Some text...</span>
</li>
<li>
<a href="#"><img src="path/to/image" /></a> <span>Some text...</span>
</li>
<!-- etc. -->
</ul>
</div>
CSS
.mcs-horizontal-example{
overflow-x: auto;
}
.mcs-horizontal-example ul{
white-space: nowrap;
list-style: none;
padding: 0;
margin: 0;
}
.mcs-horizontal-example ul > li{
display: inline-block;
}
Javascript
(function($){
$(window).on("load",function(){
$(".mcs-horizontal-example").mCustomScrollbar({
axis:"x",
theme:"dark-3",
advanced:{
autoExpandHorizontalScroll:true //optional (remove or set to false for non-dynamic/static elements)
}
});
});
})(jQuery);
CSS flexbox example
Example using CSS3 flexbox model
HTML
<div class="mcs-horizontal-example">
<img src="path/to/image" class="item" />
<img src="path/to/image" class="item" />
<img src="path/to/image" class="item" />
<!-- etc. -->
</div>
CSS
.mcs-horizontal-example{
width: 100%;
overflow-x: auto;
display: -webkit-flex; display: flex;
-webkit-flex-direction: row; flex-direction: row;
}
.mcs-horizontal-example .mCSB_container{
display: -webkit-flex; display: flex;
}
.mcs-horizontal-example .item{
-webkit-flex-shrink: 0; flex-shrink: 0;
}
Javascript
(function($){
$(window).on("load",function(){
$(".mcs-horizontal-example").mCustomScrollbar({
axis:"x",
theme:"dark-3",
advanced:{
autoExpandHorizontalScroll:true //optional (remove or set to false for non-dynamic/static elements)
}
});
});
})(jQuery);
Stretched or contained images example
Making image items fit the visible area of the scrollable element
Demo
HTML
<div class="mcs-horizontal-example">
<img src="path/to/image" class="item" />
<img src="path/to/image" class="item" />
<img src="path/to/image" class="item" />
<!-- etc. -->
</div>
CSS
.mcs-horizontal-example{
width: 640px;
overflow-x: auto;
}
.mcs-horizontal-example .item{
display: block;
float: left;
}
Javascript
(function($){
$(window).on("load",function(){
$(".mcs-horizontal-example").mCustomScrollbar({
axis:"x",
theme:"dark-3",
advanced:{
autoExpandHorizontalScroll:true
},
callbacks:{
onCreate:function(){
$(this).find(".item").css("width",$(this).width());
},
onBeforeUpdate:function(){
$(this).find(".item").css("width",$(this).width());
}
}
});
});
})(jQuery);
Contained text example
Making text elements like paragraphs fit the visible area of the scrollable element
Demo
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
HTML
<div class="mcs-horizontal-example">
<p>Some text...</p>
<img src="path/to/image" class="item" />
<img src="path/to/image" class="item" />
<img src="path/to/image" class="item" />
<!-- etc. -->
</div>
CSS
.mcs-horizontal-example{
width: 100%;
overflow-x: auto;
display: -webkit-flex; display: flex;
-webkit-flex-direction: row; flex-direction: row;
align-items: flex-start;
-webkit-flex-shrink: 1; flex-shrink: 1;
}
.mcs-horizontal-example .mCSB_container{
display: -webkit-flex; display: flex;
}
.mcs-horizontal-example .item{
-webkit-flex: 1 0 auto; flex: 1 0 auto;
}
.mcs-horizontal-example p{
-webkit-flex: 2 0 auto; flex: 2 0 auto;
max-width: 100%;
display: inline-block;
}
Javascript
(function($){
$(window).on("load",function(){
$(".mcs-horizontal-example").mCustomScrollbar({
axis:"x",
theme:"dark-3",
advanced:{
autoExpandHorizontalScroll:2
},
callbacks:{
onCreate:function(){
$(this).find("p").css("width",$(this).width());
},
onBeforeUpdate:function(){
$(this).find("p").css("width",$(this).width());
}
}
});
});
})(jQuery);
Very Nice
Hi,
Is there any way to scroll the scroll bar to active element on loading?
Hi Malihu,
please tell me how to do an infinite scroll left to right on the loop
Hi Mahilu,
I have added slick carousel where I am displaying 4 slide at a time on page and rest of the slide I can see when I am scrolling the page via next button and here I have applied mahilu custom scroll bar plugin but every time it is displaying only one slide in page and second slide I can see when I am moving the scroll bar.
How can I fix this issue.
below is the slick carousel code:
slider_container.slick({
arrows: false,
infinite: false,
dots: false,
loop: false,
cssEase: ‘linear’,
slidesToShow: 4,
slidesToScroll: 1,
speed: 400,
autoplaySpeed: 10,
waitForAnimate: true,
});
and below is the mahilu plugin code.
$(“.slider”).mCustomScrollbar({
axis:”x”,
theme:”dark-thick”,
//autoExpandScrollbar:true,
advanced:{autoExpandHorizontalScroll:true},
//updateOnContentResize:true,
scrollbarPosition: ‘outside’,
scrollInertia: 200,
scrollButtons: true
});
Hi,
Is there any way to hide horizontal scroll bar?
hola mi pregunta es como puedo manejar el script para poder detectar el scroll que se hace porque lo que quiero es cambiar estilos al logo para que se vea negro en fondo claro y blanco en fondo oscuro. no funciona con este codigo salgo en movil pero claro en movil el scroll es normal
$(window).scroll(function() {
if ($(“#logomove”).offset().top > 1160) {
$(“#logomove”).addClass(“bg-inverse”);
} else {
$(“#logomove”).removeClass(“bg-inverse”);
}
});
En esta web si se logro ese efecto de cambio de color al hacer el scroll pero no encuentro el codigo que lo hace
http://www.studiobjork.com
si alguien me pudiera ayudar
Gracias
how to use this in RTL body? and the horizontal scrollbar always scrolls from right to left.
please help me with this.
$(“.content_6”).mCustomScrollbar({
horizontalScroll:true,
advanced:{
autoExpandHorizontalScroll:true
}
});
I have tried to use horizontal scroll in bootstrap modal but it’s not wokring.
Hey, great plugin!
Was wondering if there’s an easy way to disable the scroll on mobile, and simply display images as stacked on top of one another.
Thanks!
Hi, seems that there is a bug when both scroll bars are active (vertical and horizontal) the trackpad horizontal scrolling stop working. Only the vertical one works.
You can check this in the demo that have both scroll bards: http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html
Hi,
your nice little plugin is working fine with WordPress (4.7.2).
Just one question: on smaller screen resolutions (ie. 1280px) all images are in one row. but on larger screens (24” and up), the images are in two rows (see http://www.tg-a.de).
Is there something I am doing wrong? Should I set a max-height?
Thank you in advance!
Anyway, I fixed it. It was ‘white-space: nowrap’ which has to be inserted in CSS.
Hello,
I have tried to implement horizontal scrolling on some tabs. However, once used, the scrollbar will continually follow the mouse. How can I fix this?
The code can be seen in this fiddle: https://jsfiddle.net/3av8nopv/2
Hi,
I’m getting console errors (e.g. about cross-origin iframe) in your jsfiddle. Have you tried running your code normally (outside of jsfiddle)? I just tested it and it works without issues.
I’m trying to use this wonderful plugin in my project. However, I just can’t use it. After loading all the files successfully, I just can’t access the mCustomScrollbar() function.
It is undefined even all the files are loaded successfully. I am unable to resolve the issue. Can you point me where I’m being wrong. The sample code is below.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.css" /> <title>The Title of the Page</title> </head> <body> <h1> The First Heading of the Page</h1> <div class="mcs-horizontal-example"> <!-- Some content for horizontal scrolling--> </div> <script src="https://code.jquery.com/jquery-2.1.0.min.js" integrity="sha256-8oQ1OnzE2X9v4gpRVRMb1DWHoPHJilbur1LP9ykQ9H0=" crossorigin="anonymous"></script> <script type="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script> <script> (function($){ $(window).on("load",function(){ console.log("Going to call the sc bar") $(".mcs-horizontal-example").mCustomScrollbar({ axis:"x", theme:"dark-3" }); }); })(jQuery); </script> </body> </html>Hi,
You have an error in your
jquery.mCustomScrollbar.concat.min.jsscript tag. You’ve settype="javascript"which is not correct. It should betype="text/javascript".You could also simply remove the
typeattribute from the script.Ahhh. I see. Well, thank you very much. I spent a lot of time and I was very angry at the undefined error in the console.
Now, I see the reason behind it. Thanks mate!